Function init

react-threejs-app/src/3d-init.js:7–57

(dom, setStr)

import mesh from './mesh.js';

export function init(dom, setStr) {
    const scene = new THREE.Scene();
    scene.add(mesh);

    const axesHelper = new THREE.AxesHelper(500);
    scene.add(axesHelper);

    const directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(500, 400, 300);
    scene.add(directionalLight);

    const ambientLight = new THREE.AmbientLight(0xffffff);
    scene.add(ambientLight);

    const width = 1000;
    const height = window.innerHeight - 80;

    const camera = new THREE.PerspectiveCamera(60, width / height, 1, 10000);
    camera.position.set(500, 500, 500);
    camera.lookAt(0, 0, 0);

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height)

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

    render();

    dom.append(renderer.domElement);

    const controls = new OrbitControls(camera, renderer.domElement);

    function changeHorseColor(color) {
        const horseBody = scene.getObjectByName('Cylinder');
        if(horseBody) {
            horseBody.material.color.set(color);

            setStr(`当前是 ${color} 马`)
        }
    }

    return {
        scene,
        camera,
        renderer,
        changeHorseColor
    }
}