三个JS如何使用Bloom Post-在Vanilla JS中不使用NPM进行处理

ThreeJS How to use Bloom Post-Processing Without NPM in VanillaJS

我想在使用像 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..

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

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

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

遵循 example code,删除 import 语句并在缺少的地方添加 THREE

示例不是用 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', 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"> 以便 modern import statements work

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

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

并适当调整你的路径

this article