Skybox background

gigamesh · December 6, 2018, 8:38pm

I’m trying to add a skybox background to this but I can’t figure out what is missing in my code:
http://threejs-logo-demo.s3-website-us-west-1.amazonaws.com/

source:

github.com

gigamesh/threejs-demo/blob/mobile-interactive-device-orientation/src/components/PureGold.js

import React, { Component } from "react";

const fontJSON = require("../helvetiker_bold.typeface.json");
const THREE = require("three");

class PureGold extends Component {
  state = {
    rX: 0,
    rY: 0
  };

  componentDidMount() {
    this.repaint();
  }
  componentDidUpdate(prevProps) {
    if (
      prevProps.dimensions.width !== this.props.dimensions.width ||
      prevProps.dimensions.height !== this.props.dimensions.height
    ) {
      this.repaint();

This file has been truncated. show original

Any ideas would be much appreciated!

marquizzo · December 6, 2018, 9:10pm

Looks like you’re creating the skybox in a very complex way. You could just simply do

this.scene = new THREE.Scene();
const textureCube = textureloader.load([
    ....
]);
this.scene.background = textureCube;

Three.js will handle all the mesh and material creation for you.

gigamesh · December 6, 2018, 9:18pm

thank you! I was copying/pasting code from one of the examples. Grabbed way more than I needed to.

Topic		Replies	Views
How to add the meteor effect in the skybox in react three fiber Questions shaders , animation	2	219	January 14, 2024
Skybox texture loading error. "Cannot add property manager, object is not extensible" Questions textures	2	637	February 25, 2021
how to use threejs to achieve a effect of sky box? Questions textures , materials , geometry	2	2416	August 1, 2023
Rotate a scenes background skybox texture Questions background	5	3040	January 21, 2020
CubeTextureLoader mapping of textures to skybox Questions textures , loaders	2	2824	March 4, 2020

Skybox background

Related Topics