我试图让我的 3D 对象自行绕 Y 轴旋转,并且不会禁用用户使用鼠标缩放和自定义旋转对象的能力。
我所做的是这样的:
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
var canvasOfDesk = document.getElementById("desk")
const scene = new THREE.Scene();
scene.position.y = -13
scene.add(new THREE.AxesHelper(0))
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);
const initialCameraPosition = new THREE.Vector3(
-23, 17, 36)
camera.position.x = initialCameraPosition.x
camera.position.y = initialCameraPosition.y
camera.position.z = initialCameraPosition.z
const renderer = new THREE.WebGLRenderer({ canvas: canvasOfDesk, alpha: true });
renderer.shadowMap.enabled = true
renderer.setPixelRatio(10 * window.devicePixelRatio)
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
const loader = new GLTFLoader();
const lightCandle = new THREE.SpotLight(0xffffff, 2000)
lightCandle.position.set(8, 40, -15)
scene.add(lightCandle)
const lightLaptop = new THREE.SpotLight(0xffffff, 2000)
lightLaptop.position.set(-10, 40, -15)
scene.add(lightLaptop)
loader.load(
'/desk.glb',
function(gltf) {
var obj = gltf.scene
scene.add(obj)
obj.castShadow = true
obj.receiveShadow = true
obj.traverse(function(child) {
if (child.isMesh) {
child.castShadow = true
child.receiveShadow = true
}
})
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
},
(error) => {
console.log(error)
}
)
window.addEventListener('resize', onWindowResize, false)
function onWindowResize() {
camera.updateProjectionMatrix()
render()
}
const target = new THREE.Vector3(-0.5, 1.2, 0)
const rotSpeed = 100
function animate() {
requestAnimationFrame(animate)
const p = camera.position
camera.position.y = p.y
camera.position.x =
p.x * Math.cos(rotSpeed) + p.z * Math.sin(rotSpeed)
camera.position.z =
p.z * Math.cos(rotSpeed) - p.x * Math.sin(rotSpeed)
camera.lookAt(target)
render()
}
function render() {
renderer.render(scene, camera)
}
animate()
物体按照我想要的方式旋转,但只旋转 20 秒。之后我注意到该对象正在自行缩放(放大)......
我怀疑这是由于我的
animate
函数中的计算错误造成的,但我不知道如何修复它。
有没有一种方法可以在不使用旋转公式的情况下达到相同的效果? (也许使用顺风CSS或者只是CSS?)
好吧,我尝试复制 Matsuyama-sensei https://www.craftz.dog/ 来尝试获得相同的效果。我的代码一开始工作得像我想要的那样,然后最后失败了,我会接受它。
这是我的新代码:
const target = new THREE.Vector3(-0.5, 1.2, 0)
var frame = 1
function easeOutCirc(x) {
return Math.sqrt(1 - Math.pow(x - 1, 4))
}
function animate() {
frame = frame <= 100 ? frame + 1 : frame
requestAnimationFrame(animate)
if (frame <= 100) {
var rotSpeed = -easeOutCirc(frame / 120) * Math.PI * 20
const p = initialCameraPosition
camera.position.y = p.y
camera.position.x =
p.x * Math.cos(rotSpeed) + p.z * Math.sin(rotSpeed)
camera.position.z =
p.z * Math.cos(rotSpeed) - p.x * Math.sin(rotSpeed)
camera.lookAt(target)
console.log(rotSpeed)
} else {
controls.update()
}
render()
}
其余与问题中相同。