网站建设学多久,哈尔滨建设工程信息网站,免费图纸网站,wordpress 改系统1. 准备工作 将下列文件在three.js的包中找到#xff0c;注意的是我这里使用的是模块化版本的#xff0c;这里不知道模块化的#xff0c;可以先去看一下es6的模块化。 控制器#xff1a; OrbitControls.js 加载器#xff1a;GLTFLoader.js 材质#xff1a; RoomEnvironm…
1. 准备工作 将下列文件在three.js的包中找到注意的是我这里使用的是模块化版本的这里不知道模块化的可以先去看一下es6的模块化。 控制器 OrbitControls.js 加载器GLTFLoader.js 材质 RoomEnvironment.js three.js加载压缩模型 DRACOLoader 模型文件 我这里用的是glb 2. 演示开始 1. 在body中新建一个div用来承载three.js创建canvas标签 2. 把准备好的文件引入注意script标签加上typemodule 代码
bodydiv idWebGL-output/div
/bodyscript typemoduleimport * as THREE from ./js/three.module.jsimport { OrbitControls } from ./js/OrbitControls.jsimport { GLTFLoader } from ./js/GLTFLoader.jsimport { RoomEnvironment } from ./js/RoomEnvironment.jsimport { DRACOLoader } from ./js/DRACOLoader.js
/script 到这里算是准备工作正式完成
注意引用文件中有些事件依赖于three.module.js这个文件夹的需要去源码当中把路径修改这里举一个例子 3.初始化场景相机渲染器控制器灯光 function init() {clock new THREE.Clock()// 场景相机scene new THREE.Scene()// 添加场景背景const loader11 new THREE.TextureLoader();const bgTexture loader11.load(./model/111.png);scene.background bgTexture;// scene.background new THREE.Color(0xbbbbbb)// 透视相机camera new THREE.PerspectiveCamera(50,window.innerWidth / window.innerHeight,1,2000)camera.position.set(-230, 100, 300)scene.add(camera);// 渲染器renderer new THREE.WebGLRenderer()renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)// 地表格// const grid new THREE.GridHelper(500, 100, 0xffffff, 0xffffff)// grid.material.opacity 0.5// grid.material.depthWrite false// grid.material.transparent true// scene.add(grid)// 材质// const environment new RoomEnvironment()// const pmremGenerator new THREE.PMREMGenerator(renderer)// scene.environment pmremGenerator.fromScene(environment).texture// 灯光-环境光scene.add(new THREE.AmbientLight(0x444444))// 灯光-平行光const light new THREE.DirectionalLight(0xffffff)light.position.set(0, 20, 20)light.castShadow truelight.shadow.camera.top 100light.shadow.camera.bottom -100light.shadow.camera.left -100light.shadow.camera.right 100//告诉平行光需要开启阴影投射light.castShadow truescene.add(light)// 鼠标控制器control new OrbitControls(camera, renderer.domElement)// 坐标轴// const axesHelper new THREE.AxesHelper(114)// scene.add(axesHelper)loader()animate()} 4. 加载带动画的glb文件
// glb模型加载function loader() {const loader new GLTFLoader().setPath(./model/).setDRACOLoader(new DRACOLoader().setDecoderPath(js/gltf/))loader.load(bbb.glb, function (gltf) {gltf.scene.scale.set(80, 80, 80)// 动画播放器mixer new THREE.AnimationMixer(gltf.scene)mixer.clipAction(gltf.animations[0]).play()scene.add(gltf.scene)})} 5.animate和render函数
function animate() {requestAnimationFrame(animate)if (mixer) mixer.update(clock.getDelta())control.update() // required if damping enabledrender()}function render() {renderer.render(scene, camera)}6.函数调用
init()
animate()
所有代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleglb文件渲染/title
/headbodydiv idWebGL-output/div
/bodyscript typemoduleimport * as THREE from ./js/three.module.jsimport { OrbitControls } from ./js/OrbitControls.jsimport { GLTFLoader } from ./js/GLTFLoader.jsimport { RoomEnvironment } from ./js/RoomEnvironment.jsimport { DRACOLoader } from ./js/DRACOLoader.jslet scene, camera, renderer, control, clock, mixerfunction init() {clock new THREE.Clock()// 场景相机scene new THREE.Scene()// 添加场景背景const loader11 new THREE.TextureLoader();const bgTexture loader11.load(./model/111.png);scene.background bgTexture;// scene.background new THREE.Color(0xbbbbbb)// 透视相机camera new THREE.PerspectiveCamera(50,window.innerWidth / window.innerHeight,1,2000)camera.position.set(-230, 100, 300)scene.add(camera);// 渲染器renderer new THREE.WebGLRenderer()renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)// 地表格// const grid new THREE.GridHelper(500, 100, 0xffffff, 0xffffff)// grid.material.opacity 0.5// grid.material.depthWrite false// grid.material.transparent true// scene.add(grid)// 材质// const environment new RoomEnvironment()// const pmremGenerator new THREE.PMREMGenerator(renderer)// scene.environment pmremGenerator.fromScene(environment).texture// 灯光-环境光scene.add(new THREE.AmbientLight(0x444444))// 灯光-平行光const light new THREE.DirectionalLight(0xffffff)light.position.set(0, 20, 20)light.castShadow truelight.shadow.camera.top 100light.shadow.camera.bottom -100light.shadow.camera.left -100light.shadow.camera.right 100//告诉平行光需要开启阴影投射light.castShadow truescene.add(light)// 鼠标控制器control new OrbitControls(camera, renderer.domElement)// 坐标轴// const axesHelper new THREE.AxesHelper(114)// scene.add(axesHelper)loader()animate()}// glb模型加载function loader() {const loader new GLTFLoader().setPath(./model/).setDRACOLoader(new DRACOLoader().setDecoderPath(js/gltf/))loader.load(bbb.glb, function (gltf) {gltf.scene.scale.set(80, 80, 80)// 动画播放器mixer new THREE.AnimationMixer(gltf.scene)mixer.clipAction(gltf.animations[0]).play()scene.add(gltf.scene)})}function animate() {requestAnimationFrame(animate)if (mixer) mixer.update(clock.getDelta())control.update() // required if damping enabledrender()}function render() {renderer.render(scene, camera)}init()animate()
/script
/html
右击运行 结果
