Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

STL rendering issues on Chrome

See original GitHub issue

Describe the bug

I am working on a project in which I need to add an ability to view stl files uploaded by users. I followed some tutorials and examples, and in all of them I encountered an issue with rendering the stls. They look like that:

This happens on Chrome. On Safari it works normally.

Here is a link to the STL that you see in the screenshot: https://storage.googleapis.com/ucloud-v3/ccab50f18fb14c91ccca300a.stl

I have tried it on other files, got the same resuilt.

To Reproduce Just run the code below.

Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>Stl Viewer</title>
    <script>
      function STLViewer(model, elementID) {
        var elem = document.getElementById(elementID)

        var camera = new THREE.PerspectiveCamera(70, elem.clientWidth / elem.clientHeight, 1, 1000)
        var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
        renderer.setSize(elem.clientWidth, elem.clientHeight)
        elem.appendChild(renderer.domElement)

        window.addEventListener(
          'resize',
          function () {
            renderer.setSize(elem.clientWidth, elem.clientHeight)
            camera.aspect = elem.clientWidth / elem.clientHeight
            camera.updateProjectionMatrix()
          },
          false
        )

        var controls = new THREE.OrbitControls(camera, renderer.domElement)
        controls.enableDamping = true
        controls.rotateSpeed = 0.3
        controls.dampingFactor = 0.1
        controls.enableZoom = true
        controls.autoRotate = false
        controls.autoRotateSpeed = 0.75

        var scene = new THREE.Scene()
        scene.add(new THREE.HemisphereLight(0xffffff, 1.5))

        new THREE.STLLoader().load(model, function (geometry) {
          const material = new THREE.MeshPhongMaterial({ color: 0xaaaaaa, specular: 0x111111, shininess: 200 })
          const mesh = new THREE.Mesh(geometry, material)
          scene.add(mesh)

          var middle = new THREE.Vector3()
          geometry.computeBoundingBox()
          geometry.boundingBox.getCenter(middle)
          mesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(-middle.x, -middle.y, -middle.z))
          mesh.castShadow = false
          mesh.receiveShadow = false

          var largestDimension = Math.max(
            geometry.boundingBox.max.x,
            geometry.boundingBox.max.y,
            geometry.boundingBox.max.z
          )
          camera.position.z = largestDimension * 1.5

          var animate = function () {
            requestAnimationFrame(animate)
            controls.update()
            renderer.render(scene, camera)
          }

          animate()
        })
      }

      window.onload = function () {
        STLViewer('https://storage.googleapis.com/ucloud-v3/ccab50f18fb14c91ccca300a.stl', 'model')
      }
    </script>
  </head>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>

    <script src="./lib/three.min.js"></script>
    <script src="./lib/STLLoader.js"></script>
    <script src="./lib/OrbitControls.js"></script>

    <div id="model" style="width: 1500px; height: 1000px"></div>
  </body>
</html>

I downloaded three.min.js, STLLoader.js and OrbitControls directly from the three.js repo:

https://github.com/mrdoob/three.js/blob/dev/build/three.min.js https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/STLLoader.js https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/OrbitControls.js

I tried also taking from master, same result.

Expected behavior

STL should simply render normally.