threejs 父元素 相对位置 position 网格对象

设置position都是相对于父元素的位置设置的

// 导入 threejs
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 创建场景 scene
const scene = new THREE.Scene();
// console.log(scene,'scene');
// 创建相机 -- 观看物体的不同视角
const camera = new THREE.PerspectiveCamera(
    45, // 视角
    window.innerWidth / window.innerHeight,  // 宽高比
    0.1,  // 近平面
    1000 // 远平面
);
// const camera1 = new THREE.OrthographicCamera();
// console.log('透视投影相机',camera); // 和人的眼睛看的东西一样 近大远小
// console.log('正投影相机',camera1);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// console.log('渲染器',renderer);
// 置canvas画设布的尺寸  -- 设置threejs渲染区域的尺寸 像素 px
renderer.setSize(window.innerWidth,window.innerHeight);
// domElement 就是一个 canvas 标签  结果 -- 把 canvas 渲染到了页面上
document.body.appendChild(renderer.domElement);

// 添加坐标轴
const axesHelper = new THREE.AxesHelper(5); // 参数为轴的长度
scene.add(axesHelper);

// 创建一个集合体 -- 正方体
const gemetry = new THREE.BoxGeometry(1,1,1);
// 创建材质 material  --- 网格基础材质
const material = new THREE.MeshBasicMaterial({
    color: 0x9ac833,  // # 使用 0x 替代  十六进制
});

// 创建网格模型 -- 就是 3D 物体了 -- 由几何体 gemetry 和 材质 material 构成
const mesh = new THREE.Mesh(gemetry,material);
const meshParent = new THREE.Mesh(gemetry,material);
// console.log('网格',mesh);

// 创建了父元素  把子元素放到 父元素中  ps：position 位置是相对与父元素的位置来说的 即相对位置

meshParent.position.set(-3,0,0);
mesh.position.set(0,0,0);  // 设置物体的位置 x y z  y 轴就是垂直的  （-3，0，0） 才是原点
// 把物体放到场景中间
// scene.add(mesh);
meshParent.add(mesh);
scene.add(meshParent);

// 设置相机的位置 position
camera.position.set(10,10,10);  // 远距离和近距离
// camera.position.y = 50;  // 远距离和近距离
camera.lookAt(0,0,0);
// camera.lookAt(mesh.position);// 指向mesh对应的位置

// 引入相机控件  -- 轨道控制器
// console.log('OrbitControls',OrbitControls);
const controls = new OrbitControls(camera,renderer.domElement);
// controls.addEventListener('change', function () {
//     renderer.render(scene, camera); //执行渲染操作
// });//监听鼠标、键盘事件

// 添加带阻尼的惯性
controls.enableDamping = true;   //  设置后会有滑动的效果
controls.dampingFactor = 0.2011;   // 时间越小 滑动的时间越小

controls.autoRotate = true;  // 自动旋转
// console.log(controls);
// controls.addEventListener('change', function () {
//     // 浏览器控制台查看相机位置变化
//     console.log('camera.position',camera.position);
// });
// renderer.render(scene,camera);
// controls.autoRotate = true;  // 自动旋转
// controls.autoRotateSpeed = 10030; // 设置的转速
// controls.dampingFactor = true;
// 动态的渲染函数
function animate() {
    controls.update(); // 如果使用了 autoRotate 属性等 需要在动画中执行 update 方法
    requestAnimationFrame(animate);  // 逐帧渲染
    // 旋转
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.01;
    renderer.render(scene,camera);
}
animate()