{"id":13337619,"url":"https://github.com/markaren/three-kt-wrapper","last_synced_at":"2025-10-29T05:31:24.165Z","repository":{"id":77501515,"uuid":"111575995","full_name":"markaren/three-kt-wrapper","owner":"markaren","description":"Kotlin wrappers for Three.js ","archived":false,"fork":false,"pushed_at":"2019-07-31T06:37:26.000Z","size":1010,"stargazers_count":56,"open_issues_count":1,"forks_count":12,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-01T22:51:07.635Z","etag":null,"topics":["kotlin","kotlin-js","kotlin-library","three-js","threejs"],"latest_commit_sha":null,"homepage":"https://markaren.github.io/three-kt-wrapper/","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markaren.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-21T16:47:38.000Z","updated_at":"2024-05-19T13:32:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"e3de39e5-c617-42d2-baa0-ef4f23672795","html_url":"https://github.com/markaren/three-kt-wrapper","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markaren%2Fthree-kt-wrapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markaren%2Fthree-kt-wrapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markaren%2Fthree-kt-wrapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markaren%2Fthree-kt-wrapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markaren","download_url":"https://codeload.github.com/markaren/three-kt-wrapper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238777454,"owners_count":19528813,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["kotlin","kotlin-js","kotlin-library","three-js","threejs"],"created_at":"2024-07-29T19:14:53.330Z","updated_at":"2025-10-29T05:31:23.649Z","avatar_url":"https://github.com/markaren.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# three-kt-wrapper\nKotlin wrappers for Three.js ([r88](https://github.com/mrdoob/three.js/tree/r88))\n\nAllows you to write [Three.js](https://threejs.org/) apps using [Kotlin](https://kotlinlang.org/)\n\nFor a full on Kotlin/JVM port, check out https://github.com/markaren/three.kt \n\n[![Awesome Kotlin Badge](https://kotlin.link/awesome-kotlin.svg)](https://github.com/KotlinBy/awesome-kotlin)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/markaren/three.kt/issues)\n\n[![](https://jitpack.io/v/markaren/three-kt-wrapper.svg)](https://jitpack.io/#markaren/three-kt-wrapper)\n\n## HelloWorld\n\n![result](https://raw.githubusercontent.com/markaren/three-kt-wrapper/master/screenshot.PNG)\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eKotlin + three.js\u003c/title\u003e\n    \u003cstyle\u003e\n        body {\n            margin: 0;\n            overflow: hidden;\n        }\n    \u003c/style\u003e\n\u003c/head\u003e\n    \u003cbody\u003e\n\n    \u003cdiv id=\"container\"\u003e\u003c/div\u003e\n\n        \u003cscript type=\"text/javascript\" src=\"js/libs/stats.min.js\"\u003e\u003c/script\u003e\n        \u003cscript type=\"text/javascript\" src=\"js/libs/dat.gui.min.js\"\u003e\u003c/script\u003e\n\n        \u003cscript type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js\"\u003e\u003c/script\u003e\n        \u003cscript type=\"text/javascript\" src=\"js/OrbitControls.js\"\u003e\u003c/script\u003e\n\n        \u003cscript type=\"text/javascript\" src=\"js/kt2js/kotlin.js\"\u003e\u003c/script\u003e\n        \u003cscript type=\"text/javascript\" src=\"js/kt2js/threejs-wrapper.js\"\u003e\u003c/script\u003e\n\n        \u003cscript type=\"text/javascript\" src=\"js/kt2js/example.js\"\u003e\u003c/script\u003e\n\n        \u003cscript type=\"text/javascript\"\u003e\n            new example.HelloWorld().animate()\n        \u003c/script\u003e\n\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n```kotlin\nclass HelloWorld {\n\n    private val renderer: WebGLRenderer\n    private val scene: Scene = Scene()\n    private val camera: PerspectiveCamera\n    private val controls: OrbitControls\n    private val cube: Mesh\n    private val stats: Stats = Stats()\n\n    init {\n\n        scene.add(AmbientLight())\n\n        camera = PerspectiveCamera(75, window.innerWidth.toDouble() / window.innerHeight, 0.1, 1000)\n        camera.position.setZ(5)\n\n        renderer = WebGLRenderer(WebGLRendererParams(\n                antialias = true\n        )).apply {\n            setClearColor(ColorConstants.skyblue, 1)\n            setSize(window.innerWidth, window.innerHeight)\n        }\n\n        document.getElementById(\"container\")?.apply {\n            appendChild(renderer.domElement)\n            appendChild(stats.dom)\n        }\n\n        controls = OrbitControls(camera, renderer.domElement)\n\n        cube = Mesh(BoxBufferGeometry(1, 1, 1),\n                MeshPhongMaterial().apply {\n                    this.color.set(ColorConstants.darkgreen)\n                }).also ( scene::add )\n\n        Mesh(cube.geometry as BufferGeometry,\n                MeshBasicMaterial().apply {\n                    this.wireframe = true\n                    this.color.set(ColorConstants.black)\n                }).also ( cube::add )\n\n        val points = CatmullRomCurve3(\n                arrayOf(Vector3(-10, 0, 10),\n                        Vector3(-5, 5, 5),\n                        Vector3(0, 0, 0),\n                        Vector3(5, -5, 5),\n                        Vector3(10, 0, 10))\n        ).getPoints(50)\n\n        val geometry = BufferGeometry().setFromPoints(points)\n\n        val material = LineBasicMaterial().apply {\n            color.set(0xff0000)\n        }\n\n        // Create the final object to add to the scene\n        Line(geometry, material).apply ( scene::add )\n\n        window.addEventListener(\"resize\", {\n            camera.aspect = window.innerWidth.toDouble() / window.innerHeight;\n            camera.updateProjectionMatrix();\n\n            renderer.setSize( window.innerWidth, window.innerHeight )\n        }, false)\n\n    }\n\n    fun animate() {\n        window.requestAnimationFrame {\n            cube.rotation.x += 0.01\n            cube.rotation.y += 0.01\n            animate()\n        }\n        renderer.render(scene, camera)\n        stats.update()\n    }\n\n}\n```\n\n\n## Loaders\n\n![result](https://raw.githubusercontent.com/markaren/three-kt-wrapper/master/screenshot2.PNG)\n\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eKotlin + three.js\u003c/title\u003e\n    \u003cstyle\u003e\n        body {\n            margin: 0;\n            overflow: hidden;\n        }\n    \u003c/style\u003e\n\u003c/head\u003e\n    \u003cbody\u003e\n\n        \u003cdiv id=\"container\"\u003e\u003c/div\u003e\n\n        \u003cscript type=\"text/javascript\" src=\"js/libs/stats.min.js\"\u003e\u003c/script\u003e\n        \u003cscript type=\"text/javascript\" src=\"js/libs/dat.gui.min.js\"\u003e\u003c/script\u003e\n\n        \u003cscript type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js\"\u003e\u003c/script\u003e\n        \u003cscript type=\"text/javascript\" src=\"js/OrbitControls.js\"\u003e\u003c/script\u003e\n\n        \u003cscript type=\"text/javascript\" src=\"js/STLLoader.js\"\u003e\u003c/script\u003e\n        \u003cscript type=\"text/javascript\" src=\"js/OBJLoader.js\"\u003e\u003c/script\u003e\n        \u003cscript type=\"text/javascript\" src=\"js/LoaderSupport.js\"\u003e\u003c/script\u003e\n        \u003cscript type=\"text/javascript\" src=\"js/OBJLoader2.js\"\u003e\u003c/script\u003e\n\n\n        \u003cscript type=\"text/javascript\" src=\"js/kt2js/kotlin.js\"\u003e\u003c/script\u003e\n        \u003cscript type=\"text/javascript\" src=\"js/kt2js/threejs-wrapper.js\"\u003e\u003c/script\u003e\n\n        \u003cscript type=\"text/javascript\" src=\"js/kt2js/example.js\"\u003e\u003c/script\u003e\n\n        \u003cscript type=\"text/javascript\"\u003e\n            new example.LoaderTest().animate()\n        \u003c/script\u003e\n\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n```kotlin\n\nclass LoaderTest {\n\n    val stats: Stats = Stats()\n    val renderer: WebGLRenderer\n    val scene: Scene = Scene()\n    val camera: PerspectiveCamera\n    val controls: OrbitControls\n    val models: MutableList\u003cMesh\u003e = ArrayList()\n    var speed: Double = 1.0\n    val clock: Clock = Clock(autoStart = true)\n\n    init {\n\n        val light = DirectionalLight(color = 0xffffff, intensity =  0.5)\n        light.position.set(0, 0, -1)\n        scene.add(light)\n\n        camera = PerspectiveCamera(75, window.innerWidth.toDouble() / window.innerHeight, 0.1, 1000)\n        camera.position.set(0, 5, -5)\n\n        renderer = WebGLRenderer(WebGLRendererParams(\n                antialias = true\n        )).apply {\n            setClearColor(ColorConstants.skyblue, alpha = 1)\n            setSize(window.innerWidth, window.innerHeight)\n        }\n\n        dat.GUI(GUIParams(\n                closed = false\n        )).also {\n            (it.add(this, \"speed\") as NumberController).apply {\n                min(0).max(10).step(0.1)\n            }\n        }\n\n        document.getElementById(\"container\")?.apply {\n            appendChild(renderer.domElement)\n            appendChild(stats.dom)\n        }\n\n        controls = OrbitControls(camera, renderer.domElement)\n\n        STLLoader().apply {\n            load(\"models/suzanne.stl\", {\n                Mesh(it, MeshPhongMaterial().apply {\n                    color.set(0xff5533)\n                    specular.set(0x111111)\n                    shininess = 200.0\n                }).also {\n                    models.add(it)\n                    scene.add(it)\n                }\n            })\n        }\n\n        OBJLoader().apply {\n            load(\"models/suzanne.obj\", {\n\n                it.position.setX(-5)\n                models.add(it)\n                scene.add(it)\n\n            })\n        }\n\n        OBJLoader2().apply {\n            load(\"models/suzanne.obj\", {\n\n                it.detail.loaderRootNode.let {\n\n                    it.position.setX(5)\n                    it.traverse {\n                        if (it is Mesh) {\n                            it.material.asDynamic().color.set(0x00ff00)\n                        }\n                    }\n\n                    models.add(it)\n                    scene.add(it)\n\n                }\n\n            })\n        }\n        \n        window.addEventListener(\"resize\", {\n            camera.aspect = window.innerWidth.toDouble() / window.innerHeight;\n            camera.updateProjectionMatrix();\n            renderer.setSize( window.innerWidth, window.innerHeight )\n        }, false)\n\n    }\n\n    fun animate() {\n        window.requestAnimationFrame {\n\n            val dt = clock.getDelta()\n            models.forEach {\n                it.rotation.apply {\n                    y += speed * dt\n                }\n            }\n            animate()\n        }\n        renderer.render(scene, camera)\n        stats.update()\n    }\n\n}\n```\n\n# How to get it\n\nUse [JitPack](https://jitpack.io/#markaren/three-kt-wrapper/). \nSee below for how this works using Gradle. Check the link for other builds systems. \n\n```groovy\nrepositories {\n    maven { url 'https://jitpack.io' }\n}\n\ndependencies {\n    implementation 'com.github.markaren:three-kt-wrapper:v0.88-ALPHA-7'\n}\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkaren%2Fthree-kt-wrapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkaren%2Fthree-kt-wrapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkaren%2Fthree-kt-wrapper/lists"}