SOURCE

console 命令行工具 X clear

                    
>
console
let cameraPersp, cameraOrtho, currentCamera;
let scene, renderer, control, orbit;


init();
render();


function init() {

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

    const aspect = window.innerWidth / window.innerHeight;

    cameraPersp = new THREE.PerspectiveCamera(50, aspect, 0.01, 30000);
    cameraOrtho = new THREE.OrthographicCamera(- 600 * aspect, 600 * aspect, 600, - 600, 0.01, 30000);
    currentCamera = cameraPersp;

    currentCamera.position.set(1000, 500, 1000);
    currentCamera.lookAt(0, 200, 0);

    scene = new THREE.Scene();
    scene.add(new THREE.GridHelper(1000, 10, 0x888888, 0x444444));



    const light = new THREE.DirectionalLight(0xffffff, 2);
    light.position.set(1, 1, 1);
    scene.add(light);


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





    const geometry = new THREE.BoxGeometry(200, 200, 200);
    const material = new THREE.MeshNormalMaterial({ color: 0xff0000, });




    orbit = new THREE.OrbitControls(currentCamera, renderer.domElement);
    orbit.update();
    orbit.addEventListener('change', render);

    control = new THREE.TransformControls(currentCamera, renderer.domElement);
    control.addEventListener('change', render);

    control.addEventListener('dragging-changed', function (event) {
        orbit.enabled = !event.value;
    });

    const box = new THREE.Mesh(geometry, material);


    // 创建一个组
    const group = new THREE.Object3D()
    // 盒子加入组,并添加相对group 本地坐标中心 (0,0,0) 的偏移
    group.add(box)
    box.position.x += 200
    box.position.y += 200
    box.position.z += 200
    scene.add(group);

    group.position.x += 300

    const axesHelper2 = new THREE.AxesHelper( 200 );
    group.add( axesHelper2 );
    // 控制器会把组的本地坐标中心(0,0,0) 作为控制锚点
    control.attach(group);
    scene.add(control);

    window.addEventListener('resize', onWindowResize);

    window.addEventListener('keydown', function (event) {

        switch (event.keyCode) {

            case 81: // Q
                control.setSpace(control.space === 'local' ? 'world' : 'local');
                break;

            case 16: // Shift
                control.setTranslationSnap(100);
                control.setRotationSnap(THREE.MathUtils.degToRad(15));
                control.setScaleSnap(0.25);
                break;

            case 87: // W
                control.setMode('translate');
                break;

            case 69: // E
                control.setMode('rotate');
                break;

            case 82: // R
                control.setMode('scale');
                break;

            case 67: // C
                const position = currentCamera.position.clone();

                currentCamera = currentCamera.isPerspectiveCamera ? cameraOrtho : cameraPersp;
                currentCamera.position.copy(position);

                orbit.object = currentCamera;
                control.camera = currentCamera;

                currentCamera.lookAt(orbit.target.x, orbit.target.y, orbit.target.z);
                onWindowResize();
                break;

            case 86: // V
                const randomFoV = Math.random() + 0.1;
                const randomZoom = Math.random() + 0.1;

                cameraPersp.fov = randomFoV * 160;
                cameraOrtho.bottom = - randomFoV * 500;
                cameraOrtho.top = randomFoV * 500;

                cameraPersp.zoom = randomZoom * 5;
                cameraOrtho.zoom = randomZoom * 5;
                onWindowResize();
                break;

            case 187:
            case 107: // +, =, num+
                control.setSize(control.size + 0.1);
                break;

            case 189:
            case 109: // -, _, num-
                control.setSize(Math.max(control.size - 0.1, 0.1));
                break;

            case 88: // X
                control.showX = !control.showX;
                break;

            case 89: // Y
                control.showY = !control.showY;
                break;

            case 90: // Z
                control.showZ = !control.showZ;
                break;

            case 32: // Spacebar
                control.enabled = !control.enabled;
                break;

            case 27: // Esc
                control.reset();
                break;

        }

    });

    window.addEventListener('keyup', function (event) {

        switch (event.keyCode) {

            case 16: // Shift
                control.setTranslationSnap(null);
                control.setRotationSnap(null);
                control.setScaleSnap(null);
                break;

        }

    });

}

function onWindowResize() {

    const aspect = window.innerWidth / window.innerHeight;

    cameraPersp.aspect = aspect;
    cameraPersp.updateProjectionMatrix();

    cameraOrtho.left = cameraOrtho.bottom * aspect;
    cameraOrtho.right = cameraOrtho.top * aspect;
    cameraOrtho.updateProjectionMatrix();

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

    render();

}

function render() {

    renderer.render(scene, currentCamera);

}
<div id="info">
	"W" 位移 | "E" 旋转 | "R" 缩放
</div>

<script src="https://cdn.jsdelivr.net/npm/three@0.138.3/build/three.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/three@0.138.3/examples/js/controls/OrbitControls.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/three@0.138.3/examples/js/controls/TransformControls.js">
</script>
body {
	  margin: 0;
}
canvas {
	display: block;
}

#info {
  position: absolute;
  padding: 12px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
}

本项目引用的自定义外部资源