THREE.JS

引入THREE.JS   

使用npm install three 或者直接下载THREE.JS 

用vue 为例子 使用时直接引用import * as THREE from 'three'

THREE.JS 三个关键组件

场景(scene) 渲染器(renderer) 相机(camera) 

创建场景 

let scene = new THREE.Scene()  

创建相机 

let camera = newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 0.1, 1000);// 透视相机

创建渲染器

 let renderer = new THREE.WebGLRenderer()
 renderer.setSize(window.innerWidth, window.innerHeight)
 window.body.append(renderer.domElement)

添加物体到场景中

let geometry = new THREE.BoxGeometry(1,1,1) // 声明一个盒子模型
let material = new THREE.MeshBasicMaterial({color:0x00ff00}) // 声明纹理 网孔基础材料
let cube = new THREE.Mesh(geometry,material)  // 声明一个网孔 并把几何模型和材料添加到
scene.add(cube) // 把网孔添加到场景中

渲染场景

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

创建动画

cube.rotation.x = 0.1 // x轴方向旋转
cube.rotation.y = 0.1 // y轴方向旋转

在vue中的代码实例

<template>    
    <div id="ThreeLearn1">   
     </div>
</template>
<script>    
import * as THREE from 'three'    
    export default {        
        name: "THREE_LEARN1",        
        data(){            
            return{            
                }        
        },
        methods:{
            init(){
                let elem = document.getElementById('ThreeLearn1')                // 声明场景
                let scene = new THREE.Scene()                // 创建相机和相机位置
                let camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight)   // 渲染器
                let renderer = new THREE.WebGLRenderer()
                renderer.setSize(window.innerWidth,window.innerHeight)     // 向实例中插入渲染器
                elem.appendChild(renderer.domElement)
                let geometry = new THREE.CubeGeometry(1,1,1)
                let material = new THREE.MeshBasicMaterial({color:0xFF0000})
                let cube = new THREE.Mesh(geometry,material)
                scene.add(cube)
                camera.position.z = 5
                function render() {
                    requestAnimationFrame(render)
                    cube.rotation.x += 0.1
                    cube.rotation.y += 0.1
                    renderer.render(scene, camera)
                }
                render()
            }
        },
        mounted() {
            this.init()
        }
    }
</script>
<style scoped>
</style>