threejs的基础组成

1.举个例子

房间有 物体和光线

展示需要有照相机和场景

房间 = 容器 = 场景

物体 = 骨架 + 材质

光

屏幕 =  房间 + 照相机

2.代码

<template>
    <div id="container"></div>
</template>
<script>
import * as echarts from 'echarts';
import * as THREE from 'three';
console.log("THREE", THREE)
export default { 
    name: 'home',
    mounted() {
        this.init()
    },
    methods: {
        init() {
            const w = window.innerWidth //浏览器的视口宽度
            const h = window.innerHeight //浏览器是视口高度
            
            //房间 - 3d 容器    
            // Scene(场景)
            const scene = new THREE.Scene()
            
            // 物体: geometry(骨架) + material(材质或着说皮肤)
            const geometry = new THREE.BoxGeometry(1, 1, 1) //骨架
            const material = new THREE.MeshBasicMaterial()// 皮肤
            // 合体
            const cube = new THREE.Mesh(geometry, material)
            // 设置物体的位置
            cube.position.set(1, 1, 1)
            // 物体沿着什么轴旋转
            cube.rotation.z = 45 / 180 * Math.PI
            // 物体的缩放
            cube.scale.set(2, 2, 2)
            // 把物体放到场景里面
            scene.add(cube)
            
            // 光线 - 台灯 太阳光...
            const light = new THREE.AmbientLight()
            // 把光线放到场景里面
            scene.add(light)
            
            // 相机
            const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 100)
            camera.position.set(0, 0, 5) //相机放的位置
            camera.lookAt(0, 0, 0) //相机朝向原点位置
            
            //Renderer - 渲染器
            const renderer = new THREE.WebGLRenderer()
            renderer.setSize(w, h)//设置画布的大小
            renderer.render(scene, camera) //把照相机和场景放到里面
            const element = document.getElementById('container') //获取dom节点
            element.appendChild(renderer.domElement) //在获取的节点下显示
        }
    },
}
</script>
<style lang="less">
    #container {
        
    }
</style>

3.模型运动的方式

 4.解决如果一台电脑刷新频率是0.6和一台1.2的刷新率的电脑   1.2的转速会比0.6的快一倍

 5.推荐用下面的这种方法让模型动起来

 

上面  物体围着x、z轴移动  就是围着y轴转圆