three.js的基本操作

1、在vue项目中引用three.js

npm install -save three

2、然后在vue组件中引用

import * as THREE from 'three'

3、在函数里创建场景对象Scene，创建网格模型把网格模型加入场景对象中，创建光源把光源加入场景对象中，创建相机把相机加入场景对象中，最后创建渲染器对象，在你选定的虚拟dom中插入canvas对象，调用函数

            //创建场景对象Scene
            let scene = new THREE.Scene();
            // 创建网格模型
            let geometry = new THREE.SphereBufferGeometry(60, 40, 40); //创建一个球体几何对象
            let material = new THREE.MeshLambertMaterial({//漫反射
                color: 0x7FE0FC,
                opacity: 0.8,//透明系数
                transparent: true//开启透明度
            }); //材质对象Material
            let mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
            scene.add(mesh); //网格模型添加到场景中
            
            //光源设置
            //点光源
            let point = new THREE.PointLight(0xffffff);
            point.position.set(400, 200, 300); //点光源位置
            scene.add(point); //点光源添加到场景中

            //相机设置
            let width = window.innerWidth; //窗口宽度
            let height = window.innerHeight; //窗口高度
            let k = width / height; //窗口宽高比
            let s = 400; //三维场景显示范围控制系数，系数越大，显示的范围越大
            //创建相机对象
            let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000);
            camera.position.set(500, 500, 500); //设置相机位置
            camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

            //创建渲染器对象
            let renderer = new THREE.WebGLRenderer();
            renderer.setSize(width, height);//设置渲染区域尺寸
            renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
            this.$refs.app.appendChild(renderer.domElement)  //在你选定的虚拟dom中插入canvas对象
            //执行渲染操作   指定场景、相机作为参数
            renderer.render(scene, camera);

效果图：

 

4、这时候想移动怎么弄呢，先弄一个辅助坐标系，不然没有参考系，移动了也不知道

在上面的代码里加入

 

// 辅助坐标系  参数1000表示坐标系大小，可以根据场景大小去设置
            let axisHelper = new THREE.AxisHelper(1000);
            scene.add(axisHelper);

效果图

 

 出现辅助坐标系了接下来就是移动小球，在上面代码中加入移动代码

            mesh.translateX(250);
            mesh.translateY(250);
            mesh.translateZ(0);

效果图

 

5、好歹是3D的，怎么说也要可以移动视角，这时要引入three-orbitcontrols

npm install -save-dev three-orbitcontrols

然后在组件中加入这一段

import 'three-orbitcontrols'

再创建控件对象，同时渲染器的执行操作也改成方法不断调用，就可以移动视角了

            function render() {
                renderer.render(scene, camera);//执行渲染操作
                requestAnimationFrame(render);
            }
            render();
            let controls = new THREE.OrbitControls(camera, renderer.domElement);//创建控件对象
            controls.addEventListener('ondblclick', (e) => {
                console.log(e)
            });//监听鼠标、键盘事件

效果图

 

 6、完整代码

<template>
    <div id="app" ref="app">
    </div>
</template>

<script>
import * as THREE from 'three'
import 'three-orbitcontrols'
export default {
    name: 'App',
    components: {
    },
    mounted() {
        console.log(THREE)
        this.testdemo()
    },
    methods: {
        testdemo() {
            //创建场景对象Scene
            let scene = new THREE.Scene();
            // 创建网格模型
            let geometry = new THREE.SphereBufferGeometry(60, 40, 40); //创建一个球体几何对象
            let material = new THREE.MeshLambertMaterial({//漫反射
                color: 0x7FE0FC,
                opacity: 0.8,//透明系数
                transparent: true//开启透明度
            }); //材质对象Material
            let mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
            mesh.translateX(250);
            mesh.translateY(250);
            mesh.translateZ(0);
            scene.add(mesh); //网格模型添加到场景中

            // 辅助坐标系  参数1000表示坐标系大小，可以根据场景大小去设置
            let axisHelper = new THREE.AxisHelper(1000);
            scene.add(axisHelper);

            //光源设置
            //点光源
            let point = new THREE.PointLight(0xffffff);
            point.position.set(400, 200, 300); //点光源位置
            scene.add(point); //点光源添加到场景中

            //相机设置
            let width = window.innerWidth; //窗口宽度
            let height = window.innerHeight; //窗口高度
            let k = width / height; //窗口宽高比
            let s = 400; //三维场景显示范围控制系数，系数越大，显示的范围越大

            //创建相机对象
            let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000);
            camera.position.set(500, 500, 500); //设置相机位置
            camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

            //创建渲染器对象
            let renderer = new THREE.WebGLRenderer();
            renderer.setSize(width, height);//设置渲染区域尺寸
            renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
            this.$refs.app.appendChild(renderer.domElement)  //在你选定的虚拟dom中插入canvas对象
            //执行渲染操作   指定场景、相机作为参数
            // renderer.render(scene, camera);

            function render() {
                renderer.render(scene, camera);//执行渲染操作
                requestAnimationFrame(render);
            }
            render();
            let controls = new THREE.OrbitControls(camera, renderer.domElement);//创建控件对象
            controls.addEventListener('ondblclick', (e) => {
                console.log(e)
            });//监听鼠标、键盘事件
        }

}
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>