First of all, many thanks to the forum that made it easier for me to get started with three.js.
I have put a small project online for which I have a few new questions, the code below, in a Vuejs component. I think you can understand it that way.
navigation with orbit control and mousewheel…
The background video loop is in a different component, the background of the three.js components is rendered as a texture from the video loop.
_1 I use OrbitControl to look at the scene, but the plane objects sometimes disappear when I want to move the scene, what could be the reason?
_2 now I would like to have the tarpaulin objects on the display in such a way that I can get a slight supervision with the camera with the escape to the rear. Now I thought I could move the position.y of the objects and tilt the camera slightly. However, this doesn’t work (like when I set camera.x to 2.25 in the GUI, but it should then be pushed upwards. How can I achieve this? but still be parallel to the screen.
_3 how can I create a blur to the rear, I have integrated the bokeh example, somehow it also gets blurred when I play with the GUI, but unfortunately everything, I want to see the sharpness decreasing more clearly from the front to the back.
_4 I’ve looked at the godsray example and wonder how I integrate that into my render path. at which point do I put it, I would like a beam from the center of the picture.
Ok, that was a lot now.
<template>
<div id="THREEjscontainer"></div>
</template>
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module'
import { GUI } from 'three/examples/jsm/libs/dat.gui.module'
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { BokehPass } from 'three/examples/jsm/postprocessing/BokehPass.js';
import { gsap } from "gsap";
const stats = Stats()
document.body.appendChild(stats.dom)
class MinMaxGUIHelper {
constructor(obj, minProp, maxProp, minDif) {
this.obj = obj;
this.minProp = minProp;
this.maxProp = maxProp;
this.minDif = minDif;
}
get min() {
return this.obj[this.minProp];
}
set min(v) {
this.obj[this.minProp] = v;
this.obj[this.maxProp] = Math.max(this.obj[this.maxProp], v + this.minDif);
}
get max() {
return this.obj[this.maxProp];
}
set max(v) {
this.obj[this.maxProp] = v;
this.min = this.obj[this.minProp]; // this.min(v); // this will call the min setter
}
}
export default {
name: 'THREETest',
data() {
return {
camera: null,
scene: null,
renderer: null,
mesh: null,
controls: null,
gui: null,
width: 1920,
height: 1080,
materials: [],
objects: [],
composer: null,
postprocessing: {},
effectController: {
focus: 500.0,
aperture: 5,
maxblur: 0.0
},
}
},
methods: {
init: function() {
// wohin mit three.js
let container = document.getElementById('THREEjscontainer');
// camera uns scene generieren
this.camera = new THREE.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.7, 100);
this.camera.position.z = 2.5;
this.camera.position.y = 0;
// this.camera.rotation.y = 100 * Math.PI / 180
console.log(this.camera.rotation)
this.scene = new THREE.Scene();
// Cube
let geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
let material = new THREE.MeshNormalMaterial();
this.mesh = new THREE.Mesh(geometry, material);
this.scene.add(this.mesh);
// texturebg.minFilter = THREE.LinearFilter;
// texturebg.magFilter = THREE.LinearFilter;
// video texture da transparenter Hintergrund nicht mit bokeh geht.
var videobg = document.getElementById( 'videoBG' );
var texturebg = new THREE.VideoTexture( videobg );
// var texturebg = new THREE.TextureLoader().load( './static/textures/texture-example_2048x2048.png');
texturebg.format = THREE.RGBFormat;
this.scene.background = texturebg;
// als einzelelement angelegt
// const geometry3 = new THREE.PlaneGeometry( 5, 5 );
// const texture3 = new THREE.TextureLoader().load( './static/textures/texture-example_2048x2048.png');
// const material3 = new THREE.MeshBasicMaterial( { map: texture3, transparent: true} )
// // const material3 = new THREE.MeshBasicMaterial( { map: texturebg, transparent: true} )
// material3.map.minFilter = THREE.LinearFilter
// const plane3 = new THREE.Mesh( geometry3, material3 );
// plane3.position.z = -2;
// this.scene.add( plane3 );
var plane
var texture
for ( let i = 0; i < 20; i ++ ){
geometry = new THREE.PlaneGeometry( 5, 9/16*5 );
texture = new THREE.TextureLoader().load( './static/textures/texture-example.png');
// texture.minFilter = THREE.NearestFilter
// texture.magFilter = THREE.NearestFilter
// texture = new THREE.TextureLoader().load( './static/textures/texture-example_2048x2048.png');
material = new THREE.MeshBasicMaterial( { map: texture, transparent: true} )
// material.map.minFilter = THREE.LinearFilter
// material.color.setHSL( 0.6, 0, 1);
plane = new THREE.Mesh( geometry, material );
plane.position.z = - i * 10;
plane.position.y = .0 // + i * 1.2;
this.scene.add( plane );
}
// axis anzeigen
const axesHelper = new THREE.AxesHelper( 1 );
this.scene.add( axesHelper );
// die eigentliche engine
this.renderer = new THREE.WebGLRenderer({antialias: true, alpha: true });
this.renderer.setClearColor( 0x00ff00, 1); // the default, 0 für transparent background
// this.renderer.setPixelRatio( window.devicePixelRatio );
// this.renderer.setPixelRatio(2.0)
// texture3.anisotropy = this.renderer.getMaxAnisotropy();
this.renderer.setSize(container.clientWidth, container.clientHeight);
this.controls = new OrbitControls( this.camera, this.renderer.domElement );
this.controls.enableZoom = false;
// this.controls.enableRotate = true;
// this.controls.enablePan = true;
container.appendChild(this.renderer.domElement);
// postprocessing
const renderPass = new RenderPass( this.scene, this.camera );
const bokehPass = new BokehPass( this.scene, this.camera, {
focus: 1.0,
aperture: 0.025,
maxblur: 0.1,
width: this.width,
height: this.height
} );
this.composer = new EffectComposer( this.renderer );
this.composer.addPass( renderPass );
this.composer.addPass( bokehPass );
this.postprocessing.composer = this.composer;
this.postprocessing.bokeh = bokehPass;
// this.renderer.autoClear = true;
// GUI Setup
this.gui = new GUI()
const cameraFolder = this.gui.addFolder('Camera')
cameraFolder.add(this.camera.position, 'x', -10, 10)
cameraFolder.add(this.camera.position, 'y', -10, 10)
cameraFolder.add(this.camera.position, 'z', -100, 100)
this.gui.add(this.camera, 'fov', 1, 180).onChange(this.updateCamera);
const minMaxGUIHelper = new MinMaxGUIHelper(this.camera, 'near', 'far', 0.1);
this.gui.add(minMaxGUIHelper, 'min', 0.00001, 50, 0.00001).name('near').onChange(this.updateCamera);
this.gui.add(minMaxGUIHelper, 'max', 0.1, 50, 0.1).name('far').onChange(this.updateCamera);
// cameraFolder.add(this.camera.near , 'near ', 0, 2)
// cameraFolder.add(this.camera.far, 'far', 0, 2000)
cameraFolder.open()
this.gui.add( this.effectController, "focus", 10.0, 3000.0, 10 ).onChange( this.matChanger );
this.gui.add( this.effectController, "aperture", 0, 10, 0.1 ).onChange( this.matChanger );
this.gui.add( this.effectController, "maxblur", 0.0, 0.01, 0.001 ).onChange( this.matChanger );
this.matChanger();
document.addEventListener( 'mousewheel', (event) => {
// this.camera.position.z +=event.deltaY/100;
// gsap.tweenlite( this.camera.position.z., 0 )
gsap.to( this.camera.position, {z: this.camera.position.z + event.deltaY/10, duration: 0.5, ease: "power2.inOut",});
});
},
animate: function() {
requestAnimationFrame(this.animate);
this.mesh.rotation.x += 0.01;
this.mesh.rotation.y += 0.02;
// this.controls.update()
stats.update()
// this.renderer.render(this.scene, this.camera);
this.postprocessing.composer.render( 0.1 );
},
matChanger: function () {
this.postprocessing.bokeh.uniforms[ "focus" ].value = this.effectController.focus;
this.postprocessing.bokeh.uniforms[ "aperture" ].value = this.effectController.aperture * 0.00001;
this.postprocessing.bokeh.uniforms[ "maxblur" ].value = this.effectController.maxblur;
},
updateCamera: function() {
this.camera.updateProjectionMatrix();
}
},
mounted() {
this.init();
this.animate();
},
}
</script>
<style scoped>
#THREEjscontainer {
position: absolute;
top:0px;
left:0px;
width: 1920px;
height: 1080px;
}
</style>