How to use skinview3d - 10 common examples
To help you get started, we’ve selected a few skinview3d examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
bs-community / blessing-skin-server / resources / assets / src / components / Viewer.tsx View on Github 
capeUrl: props.cape || '',
detectModel: false,
})
viewer.camera.position.z = initPositionZ
viewer.playerObject.skin.slim = props.isAlex
const animation = new skinview3d.CompositeAnimation()
stuffRef.current.handles = {
walk: animation.add(skinview3d.WalkingAnimation),
run: animation.add(skinview3d.RunningAnimation),
rotate: animation.add(skinview3d.RotatingAnimation),
}
stuffRef.current.handles.run.paused = true
// @ts-ignore
viewer.animation = animation as skinview3d.Animation
stuffRef.current.control = skinview3d.createOrbitControls(viewer)
if (!stuffRef.current.firstRun) {
const { handles } = stuffRef.current
handles.walk.paused = true
handles.run.paused = true
handles.rotate.paused = true
viewer.camera.position.z = 70
}
viewRef.current = viewer
return () => {
viewer.dispose()
stuffRef.current.firstRun = false
}
}, [reset])useEffect(() => {
const container = containerRef.current!
const viewer = new skinview3d.SkinViewer({
domElement: container,
width: container.clientWidth,
height: container.clientHeight,
skinUrl: props.skin || SkinSteve,
capeUrl: props.cape || '',
detectModel: false,
})
viewer.camera.position.z = initPositionZ
viewer.playerObject.skin.slim = props.isAlex
const animation = new skinview3d.CompositeAnimation()
stuffRef.current.handles = {
walk: animation.add(skinview3d.WalkingAnimation),
run: animation.add(skinview3d.RunningAnimation),
rotate: animation.add(skinview3d.RotatingAnimation),
}
stuffRef.current.handles.run.paused = true
// @ts-ignore
viewer.animation = animation as skinview3d.Animation
stuffRef.current.control = skinview3d.createOrbitControls(viewer)
if (!stuffRef.current.firstRun) {
const { handles } = stuffRef.current
handles.walk.paused = true
handles.run.paused = true
handles.rotate.paused = true
viewer.camera.position.z = 70const viewer = new skinview3d.SkinViewer({
domElement: container,
width: container.clientWidth,
height: container.clientHeight,
skinUrl: props.skin || SkinSteve,
capeUrl: props.cape || '',
detectModel: false,
})
viewer.camera.position.z = initPositionZ
viewer.playerObject.skin.slim = props.isAlex
const animation = new skinview3d.CompositeAnimation()
stuffRef.current.handles = {
walk: animation.add(skinview3d.WalkingAnimation),
run: animation.add(skinview3d.RunningAnimation),
rotate: animation.add(skinview3d.RotatingAnimation),
}
stuffRef.current.handles.run.paused = true
// @ts-ignore
viewer.animation = animation as skinview3d.Animation
stuffRef.current.control = skinview3d.createOrbitControls(viewer)
if (!stuffRef.current.firstRun) {
const { handles } = stuffRef.current
handles.walk.paused = true
handles.run.paused = true
handles.rotate.paused = true
viewer.camera.position.z = 70
}
viewRef.current = viewerconst container = containerRef.current!
const viewer = new skinview3d.SkinViewer({
domElement: container,
width: container.clientWidth,
height: container.clientHeight,
skinUrl: props.skin || SkinSteve,
capeUrl: props.cape || '',
detectModel: false,
})
viewer.camera.position.z = initPositionZ
viewer.playerObject.skin.slim = props.isAlex
const animation = new skinview3d.CompositeAnimation()
stuffRef.current.handles = {
walk: animation.add(skinview3d.WalkingAnimation),
run: animation.add(skinview3d.RunningAnimation),
rotate: animation.add(skinview3d.RotatingAnimation),
}
stuffRef.current.handles.run.paused = true
// @ts-ignore
viewer.animation = animation as skinview3d.Animation
stuffRef.current.control = skinview3d.createOrbitControls(viewer)
if (!stuffRef.current.firstRun) {
const { handles } = stuffRef.current
handles.walk.paused = true
handles.run.paused = true
handles.rotate.paused = true
viewer.camera.position.z = 70
}
viewRef.current = vieweruseEffect(() => {
const container = containerRef.current!
const viewer = new skinview3d.SkinViewer({
domElement: container,
width: container.clientWidth,
height: container.clientHeight,
skinUrl: props.skin || SkinSteve,
capeUrl: props.cape || '',
detectModel: false,
})
viewer.camera.position.z = initPositionZ
viewer.playerObject.skin.slim = props.isAlex
const animation = new skinview3d.CompositeAnimation()
stuffRef.current.handles = {
walk: animation.add(skinview3d.WalkingAnimation),
run: animation.add(skinview3d.RunningAnimation),
rotate: animation.add(skinview3d.RotatingAnimation),
}
stuffRef.current.handles.run.paused = true
// @ts-ignore
viewer.animation = animation as skinview3d.Animation
stuffRef.current.control = skinview3d.createOrbitControls(viewer)
if (!stuffRef.current.firstRun) {
const { handles } = stuffRef.current
handles.walk.paused = true
handles.run.paused = true
handles.rotate.paused = true
viewer.camera.position.z = 70
}initPreviewer() {
this.viewer = new skinview3d.SkinViewer({
domElement: this.$refs.previewer,
width: this.$refs.previewer.clientWidth,
height: this.$refs.previewer.clientHeight,
detectModel: false,
skinUrl: this.skin || SkinSteve,
capeUrl: this.cape,
})
this.viewer.camera.position.z = this.initPositionZ
this.viewer.animation = new skinview3d.CompositeAnimation()
this.handles = {
walk: this.viewer.animation.add(skinview3d.WalkingAnimation),
run: this.viewer.animation.add(skinview3d.RunningAnimation),
rotate: this.viewer.animation.add(skinview3d.RotatingAnimation),
}
this.handles.run.paused = trueuseEffect(() => {
const container = containerRef.current!
const viewer = new skinview3d.SkinViewer({
domElement: container,
width: container.clientWidth,
height: container.clientHeight,
skinUrl: props.skin || SkinSteve,
capeUrl: props.cape || '',
detectModel: false,
})
viewer.camera.position.z = initPositionZ
viewer.playerObject.skin.slim = props.isAlex
const animation = new skinview3d.CompositeAnimation()
stuffRef.current.handles = {
walk: animation.add(skinview3d.WalkingAnimation),
run: animation.add(skinview3d.RunningAnimation),
rotate: animation.add(skinview3d.RotatingAnimation),
}width: this.$refs.previewer.clientWidth,
height: this.$refs.previewer.clientHeight,
detectModel: false,
skinUrl: this.skin || SkinSteve,
capeUrl: this.cape,
})
this.viewer.camera.position.z = this.initPositionZ
this.viewer.animation = new skinview3d.CompositeAnimation()
this.handles = {
walk: this.viewer.animation.add(skinview3d.WalkingAnimation),
run: this.viewer.animation.add(skinview3d.RunningAnimation),
rotate: this.viewer.animation.add(skinview3d.RotatingAnimation),
}
this.handles.run.paused = true
this.control = skinview3d.createOrbitControls(this.viewer)
},
togglePause() {initPreviewer() {
this.viewer = new skinview3d.SkinViewer({
domElement: this.$refs.previewer,
width: this.$refs.previewer.clientWidth,
height: this.$refs.previewer.clientHeight,
detectModel: false,
skinUrl: this.skin || SkinSteve,
capeUrl: this.cape,
})
this.viewer.camera.position.z = this.initPositionZ
this.viewer.animation = new skinview3d.CompositeAnimation()
this.handles = {
walk: this.viewer.animation.add(skinview3d.WalkingAnimation),
run: this.viewer.animation.add(skinview3d.RunningAnimation),
rotate: this.viewer.animation.add(skinview3d.RotatingAnimation),
}
this.handles.run.paused = true
this.control = skinview3d.createOrbitControls(this.viewer)
},
togglePause() {initPreviewer() {
this.viewer = new skinview3d.SkinViewer({
domElement: this.$refs.previewer,
width: this.$refs.previewer.clientWidth,
height: this.$refs.previewer.clientHeight,
detectModel: false,
skinUrl: this.skin || SkinSteve,
capeUrl: this.cape,
})
this.viewer.camera.position.z = this.initPositionZ
this.viewer.animation = new skinview3d.CompositeAnimation()
this.handles = {
walk: this.viewer.animation.add(skinview3d.WalkingAnimation),
run: this.viewer.animation.add(skinview3d.RunningAnimation),
rotate: this.viewer.animation.add(skinview3d.RotatingAnimation),
}
this.handles.run.paused = true
this.control = skinview3d.createOrbitControls(this.viewer)
},
togglePause() {skinview3d
Three.js powered Minecraft skin viewer
