不努力code 2022-07-23 10:57 采纳率: 60%
浏览 240
已结题

threejs Orbitcontrols没反应

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()


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

img

  • 写回答

1条回答 默认 最新

  • 谷雨睡不醒 2022-07-23 15:17
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 7月31日
  • 已采纳回答 7月23日
  • 创建了问题 7月23日

悬赏问题

  • ¥100 采用栈和深度优先算法对我的代码进行修改显示路径
  • ¥15 pointnet2包安装
  • ¥20 射频功率问题,解答者有酬谢!
  • ¥80 构建降雨和积水的预测模型
  • ¥15 #Qt Transform setTransform()在鼠标拖动移动视角是一致在原地不动,无法变换视角(细微观察似乎视图有在原地抖动),无法变换视角(细微观察似乎视图有在原地抖动)
  • ¥50 如何利用无人机拍摄的数码照片测量鸟卵的长短径
  • ¥100 github贡献者给与奖励
  • ¥15 使用DS18B20+ESP8266获取温度数据返回-127.00
  • ¥15 odbc代码新增sqlserver数据源
  • ¥15 求一个USB指纹识别的驱动