如何从 THREE.js 示例中导入代码？

Posted 2023-02-19

【中文标题】如何从 THREE.js 示例中导入代码？

【英文标题】：How do I import code from THREE.js examples?

【发布时间】：2019-06-02 11:15:21

【问题描述】：

我目前正在构建一个使用 THREE.js 的 React 应用程序。

我想从THREE.js 库中导入一些代码，这不是官方分发的一部分。在THREE.js的官方repo下，examples文件夹下有一些模块，THREE.js的官方文档用来展示示例。

如何利用这些模块并在我自己的代码中使用它们？

在我的应用程序中，我想使用 THREE.STLExporter 模块。 (https://github.com/mrdoob/three.js/blob/master/examples/js/exporters/STLExporter.js)

因为我已经安装了three 作为我的应用程序的依赖项，所以我首先尝试简单地执行import * as THREE from 'three'，这似乎没有成功。

然后我尝试直接访问 examples 文件夹并通过执行 `require('three/examples/js/exporters/STLExporter') 手动获取模块，但这也不起作用。

我检查了官方文档的源代码，发现示例直接在标签中包含了必要的模块，但我不想这样做，因为我正在构建一个 React 应用程序。我希望能够通过 NPM 包含模块或将模块的代码存储在我的应用程序中。

请在这里帮助一个菜鸟。谢谢！

【问题讨论】：

你的意思是“import * as THREE from 'three' 似乎没有成功”？你是什​​么意思“require()也没有工作”？你有运行时错误吗？编译错误？

目前不支持使用 import 或 require 加载 THREE.js 示例文件（即使使用捆绑程序）（但我们正在做出一些努力）有可能）。不过，用于 webpack 的 @wildpeaks/three-webpack-plugin 可能对您的用例有所帮助。

您可以在github.com/mrdoob/three.js/issues/9562关注问题

【参考方案1】：

您可以创建一个单独的 three.js 文件，该文件将导入“three”，向其中添加任何示例代码并作为对象导出，这是一个与 THREE.OrbitControls 一起使用的 sn-p：

import * as THREE from 'three';


window.THREE = THREE; // THREE.OrbitControls expects THREE to be a global object
require('three/examples/js/controls/OrbitControls');


export default window.THREE;

然后在您的应用中使用three.js 文件，如下所示：

import React,  Component  from "react";
import ReactDOM from "react-dom";
import THREE from "./three";


class App extends Component 
    componentDidMount() 


        // BASIC THREE.JS THINGS: SCENE, CAMERA, RENDERER
        // Three.js Creating a scene tutorial
        // https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(
            75,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
        );
        camera.position.z = 5;

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);



        // MOUNT INSIDE OF REACT
        this.mount.appendChild(renderer.domElement); // mount a scene inside of React using a ref



        // CAMERA CONTROLS
        // https://threejs.org/docs/index.html#examples/controls/OrbitControls
        this.controls = new THREE.OrbitControls(camera);



        // ADD CUBE AND LIGHTS
        // https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry
        // https://threejs.org/docs/scenes/geometry-browser.html#BoxGeometry
        var geometry = new THREE.BoxGeometry(2, 2, 2);
        var material = new THREE.MeshPhongMaterial( 
            color: 0x156289,
            emissive: 0x072534,
            side: THREE.DoubleSide,
            flatShading: true
         );
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        var lights = [];
        lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
        lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
        lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );

        lights[ 0 ].position.set( 0, 200, 0 );
        lights[ 1 ].position.set( 100, 200, 100 );
        lights[ 2 ].position.set( - 100, - 200, - 100 );

        scene.add( lights[ 0 ] );
        scene.add( lights[ 1 ] );
        scene.add( lights[ 2 ] );



        // SCALE ON RESIZE

        // Check "How can scene scale be preserved on resize?" section of Three.js FAQ
        // https://threejs.org/docs/index.html#manual/en/introduction/FAQ

        // code below is taken from Three.js fiddle
        // http://jsfiddle.net/Q4Jpu/

        // remember these initial values
        var tanFOV = Math.tan( ( ( Math.PI / 180 ) * camera.fov / 2 ) );
        var windowHeight = window.innerHeight;

        window.addEventListener( 'resize', onWindowResize, false );

        function onWindowResize( event ) 

            camera.aspect = window.innerWidth / window.innerHeight;

            // adjust the FOV
            camera.fov = ( 360 / Math.PI ) * Math.atan( tanFOV * ( window.innerHeight / windowHeight ) );

            camera.updateProjectionMatrix();
            camera.lookAt( scene.position );

            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.render( scene, camera );

        



        // ANIMATE THE SCENE
        var animate = function() 
            requestAnimationFrame(animate);

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);
        ;

        animate();
    
    render() 
        return <div ref=ref => (this.mount = ref) />;
    


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

stackblitz 上的工作演示 https://stackblitz.com/edit/react-three-example-import?file=index.js

【讨论】：

在沙盒示例中，您在哪里使用全局变量方法？

@conor909 是的，你是对的，在我开始使用 /jsm/ 而不是 /js/ 从三个.js 示例导入后，只要它不再匹配代码，我就删除了演示。但是全局变量方法仍然应该工作