threejs Orbitcontrols没反应

Question

threejs Orbitcontrols没反应

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";




let width = 1920
let height = 937
// 场景
const scene = new THREE.Scene()
const geometry = new THREE.BoxGeometry(40, 40, 40);
const material = new THREE.MeshLambertMaterial({
    color: 0x00ffb4,
})
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// 相机
let k = width / height
// 参数一是角度，二是宽高比，三是最小值，四是最大值
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

// 设置光源，并追加到场景 
const point = new THREE.PointLight(0xffffff)
point.position.set(200, 100, 600)
scene.add(point)


// 渲染
const renderCtx = new THREE.WebGLRenderer();
renderCtx.setSize(width, height);//设置渲染区域尺寸
renderCtx.setClearColor(0x000000, 1); //设置背景颜色
const el = renderCtx.domElement
el.style.position = "fixed"
el.style.top = "0"
el.style.left = "0"
document.body.appendChild(renderCtx.domElement); //body元素中插入canvas对象
renderCtx.render(scene, camera);//执行渲染操

// 控制器
function initControls() {
    console.log("el",el);
    const controls = new OrbitControls(camera, el)
    controls.enableDamping = true;// 使动画循环使用时阻尼或自转 意思是否有惯性 
    controls.enableZoom = true;//是否可以缩放 
    controls.autoRotate = true;//是否自动旋转 
    controls.minDistance = 200;//设置相机距离原点的最远距离 
    controls.maxDistance = 600;//设置相机距离原点的最远距离 
    controls.enablePan = true;//是否开启右键拖拽 
    controls.update();
    controls.addEventListener('change', (e) => {
        console.log("改变了", e);
    })
}
initControls()

没有报错，但移动和缩放没有一点效果

Answer 1

手边没电脑用手粗略看了一次代码，
你这个渲染操作只执行了一次啊，那样的话不管控制器怎么动都只显示第一帧
你要在控制器变化的回调里面加渲染
或者在requestframe里加渲染