欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

three.js(使用总结一)

程序员文章站 2024-03-16 19:54:58
...

three.js使用总结

1、引入需要 的文件

<script src="./build/three.min.js"></script> <!-- 此处引入threejs基础类 -->
<script src="CSS3DRenderer.js"></script> <!-- 此处引入CSS3Drenderer.js类 -->
<!-- 以上两个文件,在下载threejs的时候就有的,引入就好 -->

2、要在前端页面中展示3d模型,我们需要的几个组成元素:
(1)场景
场景是所有物体的容器,我们要做的就是把模型装到这个容器里面。

this.scene = new THREE.Scene()

(2)相机
相机决定了场景中那个角度的景色会显示出来。
我们可以将相机理解为眼睛,眼睛的位置决定你看的角度。

var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000)

(3)渲染器
通过渲染器将我们要展示的东西渲染到domElement元素(以下是container)的画布上面。

renderer = new THREE.WebGLRenderer()        
renderer.setClearColor(0x101d2c);//颜色
renderer.setSize(window.innerWidth, window.innerHeight);//范围,大小
let container = document.getElementById('container')        
container.append(renderer.domElement)

(4)物体(灯光、模型等)
1、使用three.js的几何模型

        var geometry = new THREE.BoxGeometry(1, 1, 1);//模型(three.js几何体)
	    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00} );//材质
		var material =new THREE.MeshLambertMaterial({color:0x00ff00})
		var cube = new THREE.Mesh( geometry, material );//Mesh模型对象
		cube.castShadow = true;
		scene.add( cube );//将模型加入到场景中

2、自定义模型的导入

var suidaoobj = new THREE.OBJLoader(); 
var suidaomtl = new THREE.MTLLoader();          
suidaomtl.load(url, function (materials) {   //加载材质mtl文件
	materials.preload();
        suidaoobj.setMaterials(materials);            
        suidaoobj.load(url, function (obj) {   //加载模型obj文件
                obj.position.set(-40,0,30)          //坐标
		obj.scale.set(1, 1, 1)      //缩放
                this.scene.add(obj);
        })

3、灯光
光源分为点光源、坏境光、平行光等等。这里使用的是平行光。

var DirectionalLight = new THREE.DirectionalLight(0xffffff,3);        //光源颜色及强度
DirectionalLight.position.set(-5000,5000,5000); //光源位置

4、渲染

renderer.render( scene, camera );

环境渲染

renderScene: function () {        
	requestAnimationFrame(renderScene)
      renderer.render(scene, camera)
},