ThreeJS 如何在 VanillaJS 中使用没有 NPM 的 Bloom 后处理

Question

当使用发射 map 时，我希望我的场景具有绽放效果，如ThreeJS 示例所示。

我试图稍微理解一下代码，但我基本上被卡住了。 这些示例都是用 NPM 制作的，我的项目中没有使用这种方法。 我确信在没有这个帮助的情况下有可能产生绽放效果，但我很难理解这一切。

至于我已经拥有的，只是 StandarMeshMaterial 的基本设置：

scene = new THREE.Scene();
loader = new THREE.TextureLoader()
camera = new THREE.PerspectiveCamera( 47, (window.innerWidth/window.innerHeight) / (windowHeight*heightRatio), 0.01, 10000 );
renderer = new THREE.WebGLRenderer( { canvas: document.getElementById( canvasElement ), antialias: true, alpha: true } );
controls = new THREE.OrbitControls( camera, renderer.domElement );

ect..

function animate() {
    requestAnimationFrame( animate );           
    controls.update();              
    renderer.render( scene, camera );           
};  
        
ect..

我真的只是想应用一些后期处理效果，所以我的发光材料实际上看起来是发光的，这不是目前正在发生的事情，但我只是不知道如何......

获得此结果的最简单方法是什么？

Answer 1

示例不是用 npm 制作的。

这是下面运行的示例。 唯一改变的是模块的路径和 model 的 url 的路径。

 #info > * { max-width: 650px; margin-left: auto; margin-right: auto; }

 <link type="text/css" rel="stylesheet" href="https://threejs.org/examples/main.css"> <div id="container"></div> <div id="info"> <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Bloom pass by <a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> and <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a> <br/> Model: <a href="https://blog.sketchfab.com/art-spotlight-primary-ion-drive/" target="_blank" rel="noopener">Primary Ion Drive</a> by <a href="http://mjmurdock.com/" target="_blank" rel="noopener">Mike Murdock</a>, CC Attribution. </div> <script type="module"> import * as THREE from 'https://threejs.org/build/three.module.js'; import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js'; import { GUI } from 'https://threejs.org/examples/jsm/libs/dat.gui.module.js'; import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js'; import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js'; import { EffectComposer } from 'https://threejs.org/examples/jsm/postprocessing/EffectComposer.js'; import { RenderPass } from 'https://threejs.org/examples/jsm/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'https://threejs.org/examples/jsm/postprocessing/UnrealBloomPass.js'; let camera, stats; let composer, renderer, mixer, clock; const params = { exposure: 1, bloomStrength: 1.5, bloomThreshold: 0, bloomRadius: 0 }; init(); function init() { const container = document.getElementById( 'container' ); stats = new Stats(); container.appendChild( stats.dom ); clock = new THREE.Clock(); renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.toneMapping = THREE.ReinhardToneMapping; container.appendChild( renderer.domElement ); const scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 ); camera.position.set( - 5, 2.5, - 3.5 ); scene.add( camera ); const controls = new OrbitControls( camera, renderer.domElement ); controls.maxPolarAngle = Math.PI * 0.5; controls.minDistance = 1; controls.maxDistance = 10; scene.add( new THREE.AmbientLight( 0x404040 ) ); const pointLight = new THREE.PointLight( 0xffffff, 1 ); camera.add( pointLight ); const renderScene = new RenderPass( scene, camera ); const bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 ); bloomPass.threshold = params.bloomThreshold; bloomPass.strength = params.bloomStrength; bloomPass.radius = params.bloomRadius; composer = new EffectComposer( renderer ); composer.addPass( renderScene ); composer.addPass( bloomPass ); new GLTFLoader().load( 'https://threejs.org/examples/models/gltf/PrimaryIonDrive.glb', function ( gltf ) { const model = gltf.scene; scene.add( model ); mixer = new THREE.AnimationMixer( model ); const clip = gltf.animations[ 0 ]; mixer.clipAction( clip.optimize() ).play(); animate(); } ); const gui = new GUI(); gui.add( params, 'exposure', 0.1, 2 ).onChange( function ( value ) { renderer.toneMappingExposure = Math.pow( value, 4.0 ); } ); gui.add( params, 'bloomThreshold', 0.0, 1.0 ).onChange( function ( value ) { bloomPass.threshold = Number( value ); } ); gui.add( params, 'bloomStrength', 0.0, 3.0 ).onChange( function ( value ) { bloomPass.strength = Number( value ); } ); gui.add( params, 'bloomRadius', 0.0, 1.0 ).step( 0.01 ).onChange( function ( value ) { bloomPass.radius = Number( value ); } ); window.addEventListener( 'resize', onWindowResize ); } function onWindowResize() { const width = window.innerWidth; const height = window.innerHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize( width, height ); composer.setSize( width, height ); } function animate() { requestAnimationFrame( animate ); const delta = clock.getDelta(); mixer.update( delta ); stats.update(); composer.render(); } </script>

您需要做的是使用<script type="module">以便现代import语句工作

然后，您应该像这样将 three.js 文件复制为树

someFolder
 |
 ├-build
 | |
 | +-three.module.js
 |
 +-examples
   |
   +-jsm
     |
     +-controls
     | |
     | +-OrbitControls.js
     | +-TrackballControls.js
     | +-...
     |
     +-loaders
     | |
     | +-GLTFLoader.js
     | +-...
     |
     ...

并酌情调整路径

看这篇文章

Answer 2

首先，NPM 不是框架。 它是一个 package 管理器，用于安装项目所依赖的库，而无需手动下载脚本并将其复制到项目文件夹中。 我从您的问题中了解到的是您不熟悉该模块方法。 你想插入脚本，所有 three.js 相关的东西都应该在全局命名空间THREE下可用？

假设您将three.js下载到名为three的文件夹中，您可以按如下方式导入脚本。 确保从examples/js而不是examples/jsm加载脚本。

<script src="three/build/three.min.js"></script>
<script src="three/examples/js/controls/OrbitControls.js"></script>
<script src="three/examples/js/loaders/GLTFLoader.js"></script>
<script src="three/examples/js/postprocessing/EffectComposer.js"></script>
<script src="three/examples/js/postprocessing/RenderPass.js"></script>
<script src="three/examples/js/postprocessing/UnrealBloomPass.js"></script>

现在，您可以在THREE命名空间下使用这些类。

const renderScene = new THREE.RenderPass( scene, camera );

const bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );

按照示例代码，删除import语句并在缺少的地方添加THREE 。