Stripes on my model

Questions
, , , ,
1

I have an issue with path that shows not well.
I’m load GLTF model and everything is OK. But my path look like not good with some strange stripes. Can you help me? I can’t understand how i can fix it.

image
image1231×987 53.1 KB

As you can see on the screenshot all pathes have stripes…
All pathes in my model was converted in mesh and i had apply MeshStandardMaterial to this mesh

My code:

import * as THREE from 'three';
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import modelPath from "../sphere_actual201222.gltf";


let scene, camera, renderer, sphere, ambientLight, spotlight, floor, wall;
const width = window.innerWidth;
const height = window.innerHeight;
const aspectRatio = width/height;


function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(70, aspectRatio, 0.1, 1000);
  camera.position.z = 0;
  camera.lookAt(scene.position);

  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize(width, height);


  
  // gltf sphere
  const loader = new GLTFLoader();
  loader.load(modelPath, function ( gltf ) {
    gltf.scene.position.z = -2.2

    var mat001 = new THREE.MeshStandardMaterial();
    mat001.color = new THREE.Color("#7E44BC");
    mat001.reflectivity = 1.0;
    mat001.envMapIntensity = 1.0;
    mat001.ior = 1;
    mat001.specularIntensity = 0.1;
    var mat002 = new THREE.MeshStandardMaterial();
    mat002.color = new THREE.Color("#ffffff");
    mat002.roughness = 0.5
    mat002.specularIntensity = 0.1;
    mat001.specularColor = '0xffffff';
    gltf.scene.children[0].children[0].material = mat001
    gltf.scene.children[0].children[1].material = mat001
    gltf.scene.children[1].material = mat002
    gltf.scene.children[1].material.transparent = true
    gltf.scene.children[1].material.opacity = .5
    gltf.scene.children[1].material.depthWrite = false
    gltf.scene.children[1].material.roughness = 0.5
    gltf.scene.children[1].scale.set(.012,.012,.012)
    gltf.scene.children[1].geometry.computeVertexNormals(true);
    
    var al = new THREE.AmbientLight( 0x7E44BC, 0.2 );
    gltf.scene.add( al );
    var light2 = new THREE.PointLight(0xffffff);
    light2.position.set(-10, -10, -10)
    light2.shadowCameraVisible = true
    gltf.scene.add(light2)
    var light = new THREE.PointLight(0xffffff);
    light.position.set(10, 10, 10)
    light.shadowCameraVisible = true
    gltf.scene.add(light)
    var light3 = new THREE.PointLight(0xffffff, .8);
    light3.position.set(-20, -20, 0)
    light3.shadowCameraVisible = true
    gltf.scene.add(light3)

    scene.add( gltf.scene );

    render();

  } );

  // Rendering
  document.getElementById('first_section_bg').appendChild(renderer.domElement);
  
  window.onresize = function () {
    renderer.setSize(window.innerWidth, window.innerHeight);
    let aspectRatio = window.innerWidth / window.innerHeight;
    camera.aspect = aspectRatio;
    camera.updateProjectionMatrix();
  }
  const render = function () {
    renderer.render(scene, camera);
  }
  render();
}


window.onload = () => {
  init()
}

gltf.scene.children[0] - it’s sphere
gltf.scene.children[1] - links around (my issue)

P.S.: but when i’m load this model throw react three fiber - all is good

image
image1497×759 161 KB