三个js场景中的场景

Question

我正在努力创造一个雪人，它的肚子是一个雪球。我想知道是否有办法在场景中创建场景。基本上，当我滚动到他的肚子时，我想加载一个不同的场景。这可能吗。这是我到目前为止所拥有的基本代码。

<!DOCTYPE html>
<html>


<head>
    <title></title>
      </head>
      <body>
        <script src="three.js"></script>
        <script src="TrackballControls.js"></script>
        <script>

      var camera, controls, scene, renderer;

      init();
      animate();

      function init() {
        camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 10;

        controls = new THREE.TrackballControls( camera );
        controls.addEventListener("change", render);

        scene = new THREE.Scene();

        var geometry = new THREE.SphereGeometry(4,32,32);
        var material = new THREE.MeshBasicMaterial( { color: 0xcacec6 });
        var middleSphere = new THREE.Mesh( geometry, material );
        scene.add( middleSphere );
        middleSphere.position.y = -0.5;

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild( renderer.domElement );
      }

      function ani`enter code here`mate() {
        requestAnimationFrame( animate );
        controls.update();
      }

      function render() {
        renderer.render( scene, camera );
      }


    </script>


  </body>
</html>

Answer 1

我建议制作一个额外的场景，可能带有自己的相机，并在其中加载您想要的对象。

然后在您的 render() 或 animate() 中进行某种检查。

伪代码

make scene1 with objects and camera1
make scene2 with objects and camera2
make empty scene called currentScene
set currentScene to scene1
set currentCamera to camera1
create sceneIndex or a bool to check which scene and camera is currently used

//in render() or animate()
if( sceneIndex == 1 && its position inside snowman)
currentScene = scene2, currentCamera = camera2 and update sceneIndex

else if(sceneIndex == 2 && its cameraposition outside snowman)
currentScene = scene1, currentCamera = camera1 and update sceneIndex

//render
renderer.render(currentScene,currentCamera)

希望对您有所帮助

三个js场景中的场景

scene inside a scene with three js

canvas

scene

three.js