Three.js踩坑笔记

公司需要将体积视频放到Web上进行展示，所以改写Web了，配置好VSCode，走起。。

一个坑是，场景模型需要看起来亮一点需要伽马校正，但体积视频模型不需要，所以最后研究决定一个renderer渲染多个Scene，渲染Scene1时伽马校正，渲染Scene2时不校正

   <script type="module">
        import * as THREE from "./three.module.js"
        import { Mp4Loader } from './Mp4Loader.js'
        import { OrbitControls } from './OrbitControls.js'
        import { GLTFLoader } from './GLTFLoader.js'

        var color = 0x000000;

        // Create your main scene
        var scene = new THREE.Scene();
        var controls;
        // Create your main camera
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
        camera.position.z = 200;

        // Create lights
        var light = new THREE.PointLight(0xEEEEEE);
        light.position.set(20, 0, 20);
        scene.add(light);

        var lightAmb = new THREE.AmbientLight(0x777777);
        scene.add(lightAmb);

        // Create your renderer
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        renderer.gammaOutput = true;
        renderer.gammaFactor = 2.2;
        controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
        controls.dampingFactor = 0.1;
        controls.autoRotate = true;
        controls.screenSpacePanning = false;
        controls.minDistance = 1;
        controls.maxDistance = 300;
        controls.target.set(0, 10, 0);
        controls.maxPolarAngle = Math.PI / 2;

        // Create a cube
        var geometry = new THREE.BoxGeometry(1, 1, 1);
        var material = new THREE.MeshLambertMaterial({
            color: 0xff00ff,
            ambient: 0x121212,
            emissive: 0x121212
        });

        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // Set up the main camera
        camera.position.z = 5;

        // Load the background texture
        var geometry2 = new THREE.BoxGeometry(0.1, 0.1, 2);
        var material2 = new THREE.MeshLambertMaterial({
            color: 0xffffff,
            ambient: 0x121212,
            emissive: 0x121212
        });

        var cube2 = new THREE.Mesh(geometry2, material2);
        cube2.position.set(0, 0, 0)


        var backgroundScene = new THREE.Scene();
        //var backgroundCamera = new THREE.Camera();
        backgroundScene.add(camera);
        backgroundScene.add(cube2);

        // Rendering function
        var render = function () {
            requestAnimationFrame(render);

            cube.rotation.x += 0.05;
            cube.rotation.y += 0.02;

            cube2.rotation.x += 0.1;
            cube2.rotation.y += 0.1;

            renderer.autoClear = false;
            renderer.clear();
            renderer.gammaOutput = false;
            renderer.render(backgroundScene, camera);
            renderer.gammaOutput = true;
            renderer.render(scene, camera);
        };

        render();
    </script>

核心部分是这里：

 renderer.autoClear = false;

 renderer.clear();

renderer渲染第二次的时候不清理前一次渲染内容，下一轮渲染时清理。