ThreeJs

controls

滚轮滚动导致无法渲染

问题描述

OrbitControls引入后，
鼠标拖动事件正常，使用滚轮进行缩放操作时，整个画面无法重绘。
检查了camera的剪裁面配置，也没有问题。

解决方法

threejs版本问题，使用0.160.0版本的threejs会有这个问题，
改成更低版本0.133.0就解决了。

Controls没有任何反应

问题描述

配置了Orbitcontrols但没有任何反应，
能进controls添加的鼠标事件的断点，
但就是毫无反应。

解决方法

调试了大概一个小时，终于搞清楚了，
因为我把相机和OrbitControls.target都放在了原点位置：

1 2	camera.position.set(0,0,0) controls.target.set(0,0,0)

这会导致OrbitControls的旋转矩阵计算出现问题，
需要移动相机或者controls.target的位置：

1	camera.position.set(-0.001,0,0)

这样就解决了

移动端

uniapp中使用threejs

问题描述

想在用uniapp搭建的app端写一个用到threejs的项目，
但是在第一步就卡壳了，
先是真机测试，啥都渲染不出来，连个报错都没有，
浏览器控制台也看不到，只有HBuilder的控制台上面，
时不时的给我报出来一个错，大概意思是说获取不到render.domElement需要被append上去的那个dom元素。

解决方法

PC端调试Android手机的方法

参考文章

文章作者的总结非常简单易懂：

vue本身不支持直接通过原生JS操作DOM，于是在uniapp里，可以通过renderjs来实现逻辑层(vue的template或者说虚拟dom)与视图层(原生dom)之间的通讯，或者说操作。

在内联render中写需要操控dom的代码，问题顺利解决：

<template>
  <view>
        <view class="renderjs" id="renderjs-view"></view>
  </view>
</template>

<script module="render" lang="renderjs">
    import * as THREE from 'three'
    import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
    export default {
      mounted() {
        const view = document.getElementById('renderjs-view')

        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        view.appendChild(renderer.domElement)

        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(
          75,
          window.innerWidth/window.innerHeight,
          0.01,
          10000
        )
        scene.add(camera)
        camera.position.set(30,30,30)
        camera.lookAt(0,0,0)
        const controls = new OrbitControls(camera, renderer.domElement)
        controls.update()

        const axesHelper = new THREE.AxesHelper(5)
        scene.add(axesHelper)

        const boxGeometry = new THREE.BoxGeometry(3,3,3)
        const boxMetarial = new THREE.MeshBasicMaterial({
          color:0x00ff00
        })
        const box = new THREE.Mesh(boxGeometry, boxMetarial)
        scene.add(box)
        renderer.setAnimationLoop(animate)
        
        function animate(){
          renderer.render(scene,camera)
        }
      },

    };
</script>

Postprocessing

UnrealBloomPass无法渲染透明通道

问题描述

大屏项目中有个模块，需要绘制背景透明的3D场景，里面还有泛光效果，
因此我使用setOpacity+UnrealBloomPass的方式来实现，
但是实际渲染出来发现场景背景始终是黑色的，
关闭UnrealBloomPass发现透明背景恢复正常。
看来问题出在UnrealBloomPass上

解决方法

参考：

当前版本的three中，UnrealBloomPass确实不支持透明通道渲染，
但是这个老哥改了几行UnrealBloomPass.js里的代码：改动详情

实际上就是把材质的transparent打开，
计算纹理的时候加入alpha通道的数值，

但是这老哥也在底下说了：

unrealBloomPass的泛光效果和html元素无法很好的融合在一起，不建议使用。

这个issues底下还有个解决方案，用到的是shaderPass的方式：selective bloom example

我一开始也想到用这个方法，即unrealBloomPass只渲染到指定图层部位，看来是可行的