Objects disappearing in webview

Question:
How do I fix the issue of my webview randomly going blank?

Repl link:

html.html - project py - Replit

code snippet


const scene = new THREE.Scene();

import { OrbitControls } from '/three/examples/jsm/controls/OrbitControls.js';


const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000,);

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#bg'),
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.setZ(30);

renderer.render(scene, camera)


const { MathUtils } = THREE;


const geomerty = new THREE.TorusGeometry(10, 3, 16, 100)
const material = new THREE.MeshStandardMaterial({color: 0x44aa88, wireframe: true})
const Torus = new THREE.Mesh(geomerty, material);
const pointLight = new THREE.PointLight(0xffffff, 1, 100)

const controls = new OrbitControls(camera);

scene.add(Torus)
scene.add(pointLight)



function animate() {
  requestAnimationFrame( animate);
  renderer.render( scene, camera);
  

  Torus.rotation.x += 0.01;
  Torus.rotation.y += 0.005;
}

animate()

Hi @Kingdogg , welcome to the forums!
It works fine for me when I forked it. /html.html gives no issues. Maybe try opening it in a new tab, and add /html.html to the back?
Hope this helps!

all right I will try

it’s a blank page, do you think it’s related to my computer or something else? Because this problem only happens when I add in this thing below

import { OrbitControls } from '/three/examples/jsm/controls/OrbitControls.js';
1 Like

It’s more of a code issue, because in the “blank page”, you can actually see a Made with Replit button, so it’s your javascript problem.

I see, so if it is a problem with the JavaScript part of my code then how could I resolve it without removing the orbitcontrols import?

You’ll need to find the part of your code that causes it to break when the controls are added.

It appears that the only thing that cause it to break is when I add in any type of imports to the code.

It appears that other peoples three.js don’t work on my replit either.

Click on the URL bar above the webview and delete “srcdoc”

1 Like

I wonder what exactly makes this function and not my original code