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轴转圆