Three.js显示一个可控制的3D模型

在学习WebAR的过程中，我想用three.js自己创建一个3D模型而不是加载已经写好的obj文件。

这里我们使用到CSS3DRenderer.js(css3模型渲染器)和TrackballControls.js(场景控制器)当然还有Three.js

下面讲讲js部分代码

首先定义Three.js必备的东西

var camera, scene, renderer;//创建相机,场景,渲染器
var controls;//定义控制器

然后写初始化函数

function init() {

                    var container = document.getElementById('container');

                    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 5000);//相机初始化为透视相机
                    camera.position.set(0, 0, 3000);
                    scene = new THREE.Scene();
                    renderer = new THREE.CSS3DRenderer();
                    renderer.setSize(window.innerWidth, window.innerHeight);
                    container.appendChild(renderer.domElement);
                    controls = new THREE.TrackballControls(camera);//控制器初始化
                    controls.rotateSpeed = 4;
                    window.addEventListener('resize', onWindowResize, false);
                    document.addEventListener('mousedown', function () {
                        // blocker.style.display = '';
                    });
                    document.addEventListener('mouseup', function () {
                        // blocker.style.display = 'none';
                    });
                }

 

                function onWindowResize() {
                    camera.aspect = window.innerWidth / window.innerHeight;
                    camera.updateProjectionMatrix();
                    renderer.setSize(window.innerWidth, window.innerHeight);
                }
                
                function animate() {
                    requestAnimationFrame(animate);//这个方法可以根据帧速率触发animate方法
                    controls.update();
                    renderer.render(scene, camera);
                }//

以上已经将模型创建出来了，接下来就是向里面添加元素了。使用CSS3DRenderer.js中的THREE.CSS3DObject（）类

1. const contr= document.createElement('div'); // 使用 js 动态创建 Dom

2. contr.className = 'contr';

3. const objectContainer = new THREE.CSS3DObject(contr); // 使用 CSS3DObject 将 Dom 转换为 3d 元素

4. scene.add(objectContainer); // 将转换好的 3d 元素添加到场景

5. 这样就向模型中添加了一个元素

6. 按理来说所有的能给 Dom添加的东西都能在模型中显示出来。比如图片，甚至是可交互的网页也能够实现

7.