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

问题描述

在使用 ThreeJS Example 中所示的自发光贴图时，我希望我的场景具有泛光效果。

我试图稍微理解代码，但我基本上被卡住了。示例都是用 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..

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

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

解决方法

示例不是用 npm 制作的。

这是下面运行的示例。唯一改变的是模块的路径和模型的 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',3.0 ).onChange( function ( value ) {

      bloomPass.strength = Number( value );

    } );

    gui.add( params,'bloomRadius',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"> 以便 modern import statements work

然后你应该像这样将三个.js文件复制为树

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

并根据需要调整路径

见this article

,

首先，NPM 不是框架。它是一个包管理器，可以安装您的项目所依赖的库，而无需手动下载脚本并将其复制到您的项目文件夹中。我从你的问题中读到的是你不熟悉那种模块方法。您想插入脚本并且所有与三个 .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,0.85 );

按照 example code，删除 import 语句并在缺少的地方添加 THREE。