I am using the latest version of typescript “3.8.3” globally.
Unfortunately my app won’t start with importing core modules. Here is my babylon code:
import React, { Component } from 'react'
import { TweenMax, Power2 } from "gsap"
import {
Scene,
Engine,
ArcRotateCamera,
Vector3,
HemisphericLight,
Color3,
Tools,
Texture,
MeshBuilder,
StandardMaterial,
SceneLoader
} from 'babylonjs'
import 'babylonjs-loaders'
class Scene3d extends Component {
constructor(props) {
super(props)
this.moveCamera = this.moveCamera.bind(this)
this.changeColor = this.changeColor.bind(this)
this.myInput = React.createRef()
this.state = {}
}
models = {
standard: {
name: "crate"
},
second: {
name: "bike"
},
third: {
name: "test"
}
}
colors = {
red: new Color3(0.5137, 0, 0),
blue: new Color3(0, 0, 0.5137),
green: new Color3(0.290, 0.741, 0.674),
yellow: new Color3(0.968, 0.717, 0.2),
black: new Color3(0, 0, 0),
white: new Color3(1, 1, 1),
grey: new Color3(0.5, 0.5, 0.5)
}
materials = {
white_wood: {
path: "/models/crate/white_wood.png"
},
brown_wood: {
path: "/models/crate/Wooden Crate_Crate_BaseColor.png"
},
new_brown_wood: {
path: "/models/crate/Wood_Bamboo_Medium.jpg"
},
metal: {
path: "/models/crate/_Metal_Embossed_1.jpg"
}
}
moveCamera = e => {
TweenMax.to(this.camera, 1, {
alpha: e.detail.alpha,
beta: e.detail.beta,
radius: e.detail.radius,
ease: Power2.easeOut,
})
}
changeModel = e => {
if (Object.keys(this.models[e.detail.model]).includes("meshes") && e.detail.model !== this.props.productConfig.model) {
this.models[this.props.productConfig.model].meshes.map(meshId => {
return this.scene.getMeshByID(meshId).setEnabled(false)
})
this.models[e.detail.model].meshes.map(meshId => {
return this.scene.getMeshByID(meshId).setEnabled(true)
})
} else if (!Object.keys(this.models[e.detail.model]).includes("meshes")) {
this.models[this.props.productConfig.model].meshes.map(meshId => {
return this.scene.getMeshByID(meshId).setEnabled(false)
})
this.addModel(e.detail.model)
}
}
changeMaterial = e => {
if (!this.materials[e.detail.material].isLoaded) {
this.materials[e.detail.material].texture = new Texture(this.materials[e.detail.material].path)
this.materials[e.detail.material].isLoaded = true
}
e.detail.meshIds.map(meshId => {
return this.scene.getMeshByID(meshId).material.diffuseTexture = this.materials[e.detail.material].texture
})
}
changeColor = e => {
e.detail.meshIds.map(meshId => {
return TweenMax.to(this.scene.getMeshByID(meshId).material.diffuseColor, 1, {
r: this.colors[e.detail.color].r,
g: this.colors[e.detail.color].g,
b: this.colors[e.detail.color].b
})
})
}
changeSize = e => {
e.detail.meshIds.map(meshId => {
if (e.detail.size.x) {
this.scene.getMeshByID(meshId).scaling.x = e.detail.size.x
}
if (e.detail.size.z) {
this.scene.getMeshByID(meshId).scaling.z = e.detail.size.z
}
if (e.detail.size.y) {
this.scene.getMeshByID(meshId).scaling.y = e.detail.size.y
}
return true
})
}
onResizeWindow = () => {
if (this.engine) {
this.engine.resize()
}
}
setEngine = () => {
this.engine = new Engine(this.stage)
}
setScene = () => {
this.scene = new Scene(this.engine)
}
setCamera = () => {
this.camera = new ArcRotateCamera("default camera", Tools.ToRadians(200), Tools.ToRadians(70), 15, new Vector3(0, 2.5, 0), this.scene);
this.camera.attachControl(this.stage, true)
this.camera.lowerAlphaLimit = Tools.ToRadians(.00001)
this.camera.upperAlphaLimit = Tools.ToRadians(360)
this.camera.upperBetaLimit = Tools.ToRadians(80)
this.camera.lowerRadiusLimit = 5
this.camera.upperRadiusLimit = 20
this.camera.wheelPrecision = 100
}
setLight = () => {
new HemisphericLight('light1', new Vector3(0, 1, 0), this.scene)
}
setSceneEnvironment = state => {
this.loadGround(state)
this.setSceneBackground(state)
}
loadGround = state => {
var grassMaterial = new StandardMaterial("grass", this.scene)
grassMaterial.diffuseTexture = new Texture('textures/grass.jpg', this.scene)
let ground = MeshBuilder.CreateGround('ground', { width: 1000, height: 1000 }, this.scene, true)
ground.material = grassMaterial
if (!state) {
ground.setEnabled(false)
}
}
setSceneBackground = state => {
if (state) {
this.scene.clearColor = new Color3(0.53, 0.81, 0.92)
} else {
this.scene.clearColor = new Color3(1, 1, 1)
}
}
toggleEnv() {
const ground = this.scene.getMeshByID("ground")
if (ground && ground._isEnabled) {
TweenMax.to(this.scene.clearColor, .5, {
r: 1,
g: 1,
b: 1
})
TweenMax.to(ground.material, .5, {
alpha: 0
})
ground.setEnabled(false)
} else if (ground && ground._isEnabled === false) {
ground.setEnabled(true)
TweenMax.to(ground.material, .5, {
alpha: 1
})
TweenMax.to(this.scene.clearColor, 1, {
r: 0.53,
g: 0.81,
b: 0.92
})
}
}
loadEnvToggler = () => {
const ground = this.scene.getMeshByID("ground")
const envToggler = document.createElement("button")
envToggler.className = "env_toggler"
envToggler.innerText = ground ? ground._isEnabled ? "Hintergrund deaktivieren" : "Hintergrund aktivieren" : null
envToggler.onclick = e => {
this.toggleEnv()
e.target.innerText = ground ? ground._isEnabled ? "Hintergrund deaktivieren" : "Hintergrund aktivieren" : null
}
document.body.appendChild(envToggler)
}
loadInitialSetup = model => {
var initialMeshes = []
this.scene.meshes.map(mesh => {
return initialMeshes.push(mesh.id)
})
this.models.initialSetup = {}
this.models.initialSetup.meshes = initialMeshes
SceneLoader.Append("/models/" + this.models[model].name + "/", this.models[model].name + ".babylon", this.scene, scene => {
const initialMeshes = this.models.initialSetup.meshes
var activeMeshes = []
this.scene.meshes.map(mesh => {
return activeMeshes.push(mesh.id)
})
const meshes = activeMeshes.filter(mesh => !initialMeshes.includes(mesh))
this.models[model].meshes = meshes
this.setDefaultConfiguration(meshes)
this.setSceneEnvironment(false)
this.loadEnvToggler()
})
}
addModel = model => {
SceneLoader.Append("/models/" + this.models[model].name + "/", this.models[model].name + ".babylon", this.scene, () => {
this.setSceneEnvironment()
var oldActiveMeshes = []
Object.keys(this.models).map(oldModel =>
oldModel !== model ? oldActiveMeshes.push(this.models[oldModel].meshes) : null
)
var totalOldActiveMeshes = [].concat.apply([], oldActiveMeshes)
const activeMeshes = []
this.scene.meshes.map(mesh => {
return activeMeshes.push(mesh.id)
})
const meshes = activeMeshes.filter(mesh => !totalOldActiveMeshes.includes(mesh))
this.models[model].meshes = meshes
this.setDefaultConfiguration(meshes)
})
}
setDefaultConfiguration = meshes => {
this.changeMaterial({ detail: {
meshIds: meshes,
material: this.props.productConfig.material
}})
this.changeColor({ detail: {
meshIds: meshes,
color: this.props.productConfig.color
}})
this.changeSize({ detail: {
meshIds: meshes,
size: {
x: this.props.productConfig.width,
z: this.props.productConfig.length,
y: this.props.productConfig.height
}
}})
}
componentDidMount() {
this.setEngine()
this.setScene()
this.setCamera()
this.setLight()
this.setSceneEnvironment()
window.addEventListener('resize', this.onResizeWindow)
window.addEventListener('move-camera', this.moveCamera)
window.addEventListener('change-model', this.changeModel)
window.addEventListener('change-material', this.changeMaterial)
window.addEventListener('change-color', this.changeColor)
window.addEventListener('change-size', this.changeSize)
this.loadInitialSetup(this.props.productConfig.model)
this.engine.runRenderLoop(() => {
this.scene.render()
})
this.setBodyHeight()
}
setBodyHeight = () => {
this.setState({ bodyHeight: this.stage.width }, () => {
this.engine.resize()
})
}
render() {
return (
<canvas className="scene" style={{ height: this.state.bodyHeight }} ref={ el => this.stage = el}></canvas>
)
}
}
export default Scene3d
I am totally unable to repro your case.
