threejs 移动摄像机围绕场景中心绕圆圈

最新推荐文章于 2024-08-29 19:30:00 发布

WormJan

最新推荐文章于 2024-08-29 19:30:00 发布

阅读量2.3k

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/superfans98/article/details/126504212

版权

基本原理就是计算摄像机在所围绕的圆上的坐标，这里坐标实际上是计算x和z轴的坐标。因为y轴是观测高度才使用的。绕圈实际上是x和z轴上的坐标在变化。

效果图(不会截gif图，弄了个静图)

正方形和圆都在旋转，所以正方形距离平板有一定高度，不然的话一旋转，就到平板下面去了。计算正方形距离地面的高度公式为 Math.sqrt(5*5 + 5*5) / 2，边长为4，线条为1，即为5。根据勾股定理a*a + b*b = c*c ，即可以算出正方形中心到平板的距离。

移动摄像头（即从不同的视角观察场景），使用camera.position.set即可。

html代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>threejs</title>
		<style type="text/css">
			*{margin: 0; padding: 0; box-sizing: border-box;}
			body{margin: 0; overflow: hidden;}
		</style>
	</head>
	<body>
		<div id='state' style="position:absolute;left:0; top:0; opacity: 1;"></div>
		<script src="js/stats.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/three.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

main.js中的代码如下：

~function () {
    console.log(THREE.REVISION);


    const scene = new THREE.Scene()

    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)

    const renderer = new THREE.WebGLRenderer()

    renderer.setClearColor(0x000000)

    renderer.setSize(window.innerWidth, window.innerHeight)

    renderer.shadowMap.enabled = true

    
    const axes = new THREE.AxesHelper(20)
    scene.add(axes)

    const spotLight = new THREE.SpotLight(0xFFFFFF)
    spotLight.position.set(-40, 40, -15)
    spotLight.castShadow = true
    spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024)
    spotLight.shadow.camera.far = 100
    spotLight.shadow.camera.near = 40
    scene.add(spotLight)

   
    const planeGeometry = new THREE.PlaneGeometry(60, 40)

    const planeMaterial = new THREE.MeshLambertMaterial({
        'color': 0xffffff
    })


 
    const plane = new THREE.Mesh(planeGeometry, planeMaterial)

    plane.rotation.x = -0.5 * Math.PI
    plane.position.set(0, 0, 0)
    plane.receiveShadow = true
    
    scene.add(plane)

    const cubeGeometry = new THREE.BoxGeometry(4, 4, 4)
    const cubeMaterial = new THREE.MeshBasicMaterial({
        'color': 0xFF0000
        , 'wireframe': true
    })
    const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
    cube.position.set(-8, Math.sqrt(50) / 2, 0)
    cube.castShadow = true
    scene.add(cube)

    const sphereGeometry = new THREE.SphereGeometry(4, 20, 20)
    const sphereMaterial = new THREE.MeshBasicMaterial({
        'color': 0x7777FF
        ,'wireframe':true
    })
    const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
    sphere.position.set(20, 4, 0)
    sphere.castShadow = true
    scene.add(sphere)

    var r = 60    //旋转半径
    var camera_x = -r;
    var camera_y = 20;
    var camera_z = r;
    camera.position.set(camera_x, camera_y, camera_z)
    
    
    document.body.appendChild(renderer.domElement)

    var deg = Math.PI / 180;

    stats = new Stats();
    document.getElementById('state').appendChild(stats.domElement)
    update_stats();
    function update_stats() {
        stats.update();
        deg += 0.01;
        camera_x = r * Math.cos(-deg);
        camera_z = r * Math.sin(-deg);
        cube.rotation.x += 0.01
        cube.rotation.y += 0.01
        cube.rotation.z += 0.01
        sphere.rotation.x += 0.01
        camera.position.set(camera_x, camera_y, camera_z)
        camera.lookAt(scene.position)
        renderer.render(scene, camera)
        requestAnimationFrame(update_stats);
    }
}()

代码段中包括显示侦率的代码。可以去掉。即这些代码：

stats = new Stats();
document.getElementById('state').appendChild(stats.domElement)
.
.
.
stats.update();

threejs版本为116，chrome浏览器