I am attempting to replicate the look of the model shown in this photo https://i.sstatic.net/IDLaV.png How can I remove the strange lines from the model while rotating it? You can observe these lines when rotating the model on this link . What seems to be the issue? Do I need to adjust the opacity to achieve a result similar to the screenshot? Alternatively, is there a way to hide the background from the user, keeping only reflectivity and metalness on the model?
Here is my script for threeJs: Thank you in advance for your assistance!
<script type="module>
import * as THREE from 'https://threejs.org/build/three.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 { RGBELoader } from 'https://threejs.org/examples/jsm/loaders/RGBELoader.js';
import { RoughnessMipmapper } from 'https://threejs.org/examples/jsm/utils/RoughnessMipmapper.js';
var container, controls;
var camera, scene, renderer;
init();
render();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 20);
camera.position.set(-1.8, 0.6, 2.7);
scene = new THREE.Scene();
new RGBELoader()
.setDataType(THREE.UnsignedByteType)
.setPath('https://threejs.org/examples/textures/equirectangular/')
.load('royal_esplanade_1k.hdr', function(texture) {
var envMap = pmremGenerator.fromEquirectangular(texture).texture;
scene.background = envMap;
scene.environment = envMap;
texture.dispose();
pmremGenerator.dispose();
render();
// model
// use of RoughnessMipmapper is optional
var roughnessMipmapper = new RoughnessMipmapper(renderer);
var loader = new GLTFLoader()
loader.load('http://weblife.su/WineBazar/1/ws_r_2-5.glb', function(gltf) {
gltf.scene.traverse(function(child) {
if (child.isMesh) {
child.material.color.setHex(0x9ed7f5);
child.material.emissive.setHex(0x062f61);
child.material.transparent = true;
child.material.opacity = 0.5;
child.material.needsUpdate = true;
child.material.reflectivity = 0.8;
child.material.roughness = 0.2;
child.material.metalness = 0.5;
child.depthWrite = true;
}
});
scene.add(gltf.scene);
roughnessMipmapper.dispose();
render();
});
});
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild(renderer.domElement);
var pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();
controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render);
controls.minDistance = 2;
controls.maxDistance = 32;
controls.target.set(0, 0, -0.2);
controls.update();
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
function render() {
renderer.render(scene, camera);
}
</script>