threejs创建初始化场景

大佬threejs个人网站链接：www.ryan-floyd.com/

大佬掘金链接：juejin.cn/post/698503…

个人说明：

本人只是觉得大佬的这种个人网站风格很nice，所以我也想学，而且自己也会一丢丢的threejs，并无其他意思，嘻嘻~

目前本人通用的代码，创建3D场景等一系列的初始化，文件如下：

var scene;//相机
var camera;//场景
var renderer;//渲染器

let controls;

let renderCount = -5 * 60;

function incRenderCount() {
    renderCount += 2;
}
let grid;

function initThree(canvas3d) {
    let canvas_bound = canvas3d.getBoundingClientRect();
    scene = new THREE.Scene(); //相机

    //创建3D世界
    let w = canvas_bound.width;
    let h = canvas_bound.height;

    //创建渲染器
    renderer = new THREE.WebGLRenderer({
        // renderer = new THREE.SoftwareRenderer({
        canvas: canvas3d,
        antialias: true, //抗锯齿
        preserveDrawingBuffer: true, //3D加上这个在缩略图中可以变成白色
        antialias: true,
        alpha: true
    });
    renderer.setSize(w, h);
    renderer.setClearColor(new THREE.Color("#778A99")); //把渲染器的背景变成白色
    renderer.setPixelRatio(2);

    // 创建场景
    // 量纲，单位 1px 1m 1kg
    camera = new THREE.PerspectiveCamera(70, w / h, 0.1, 2200);

    //定义相机的x,y,z位置
    camera.position.set(-154.24513482840493, 173.01753880699488, -178.2074663736008);
    camera.lookAt(scene.position); //把相机的位置渲染到场景中

    camera.up.x = 0;//相机以哪个方向为上方
    camera.up.y = 1;
    camera.up.z = 0;

    //控制器，鼠标左键和右键，滑轮操作
    controls = new THREE.OrbitControls(camera, canvas3d);

    //是否可以缩放
    controls.enableZoom = true;
    //设置相机距离原点的最远距离
    controls.minDistance = 20;
    controls.maxDistance = 700;

    let cameraLight = new THREE.DirectionalLight(0xffffff, 0.3);
    cameraLight.position.copy(camera.position);
    scene.add(cameraLight);

    controls.addEventListener("change", function () {
        // console.log("camera", camera.position.x, camera.position.y, camera.position.z);
        cameraLight.position.copy(camera.position);
        renderCount += 2;
    });

    function addLights() {
        const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
        hemiLight.position.set(0, 20, 0);
        scene.add(hemiLight);

        const dirLight = new THREE.DirectionalLight(0xffffff);
        dirLight.position.set(0, 10, 0);
        scene.add(dirLight);

    }

    scene.background = new THREE.Color(0xe0e0e0);
    scene.fog = new THREE.Fog(0xe0e0e0, 20, 1200);

    addLights();

    const floor = new THREE.Mesh(new THREE.PlaneGeometry(2100, 2100), new THREE.MeshBasicMaterial({ color: 0xffffff, depthWrite: false }));
    floor.rotation.x = - Math.PI / 2;
    floor.position.y = -60;
    scene.add(floor);

    grid = new THREE.GridHelper(2000, 15, 0x000000, 0x000000);
    grid.material.opacity = 0.2;
    grid.material.transparent = true;
    scene.add(grid)
    grid.position.y = -60;

    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    // renderer.setClearColor(0xffffff, 1);
    renderCount++;

    //渲染场景
    function animate() {
        requestAnimationFrame(animate);
        // renderer.render(scene, camera);
        if (renderCount > 0) {
            renderer.render(scene, camera);
            renderCount = 0;
        } else if (renderCount < 0) {
            renderer.render(scene, camera);
            renderCount++;
        }
    }

    animate();
}

let canvas = document.getElementById("canvas3d");
initThree(canvas);


module.exports = {
    renderer,
    camera,
    scene,
    renderCount,
    incRenderCount,
    grid,
}

结语

希望自己能坚持下去，不是说一定要日更，最起码工作日一天一篇，不过未来工作忙的话看情况，记录一下。加油！